d1f82e382d
* Fix Arabic RTL text rendering in web UI - Add dir='auto' attributes to markdown containers and blocks - Implement post-processing to add dir='auto' to all text elements - Replace directional CSS properties with logical properties for proper RTL list alignment - Ensure bidirectional text support for mixed Arabic/English content * Clean up commented duplicate function Remove the commented-out duplicate transformMdastNode function that was left over from refactoring. * Fix Arabic RTL text rendering in web UI - Add dir='auto' attributes to markdown containers and blocks - Implement post-processing to add dir='auto' to all text elements - Replace directional CSS properties with logical properties for proper RTL list alignment - Minor code formatting improvements This ensures bidirectional text support for mixed Arabic/English content in the llama.cpp web UI. * Implement rehype plugin for comprehensive RTL text support - Add rehypeRtlSupport plugin that applies dir='auto' to all elements with children - Replace DOMParser-based approach with efficient HAST tree processing - Remove hardcoded element lists for better maintainability - Ensure proper bidirectional text rendering for mixed RTL/LTR content * Fix RTL text rendering with rehype plugin and cleanup * fix: prettier formatting
29 lines
811 B
TypeScript
29 lines
811 B
TypeScript
/**
|
|
* Rehype plugin to provide comprehensive RTL support by adding dir="auto"
|
|
* to all text-containing elements.
|
|
*
|
|
* This operates directly on the HAST tree, ensuring that all elements
|
|
* (including those not in a predefined list) receive the attribute.
|
|
*/
|
|
|
|
import type { Plugin } from 'unified';
|
|
import type { Root, Element } from 'hast';
|
|
import { visit } from 'unist-util-visit';
|
|
|
|
/**
|
|
* Rehype plugin to add dir="auto" to all elements that have children.
|
|
* This provides bidirectional text support for mixed RTL/LTR content.
|
|
*/
|
|
export const rehypeRtlSupport: Plugin<[], Root> = () => {
|
|
return (tree: Root) => {
|
|
visit(tree, 'element', (node: Element) => {
|
|
if (node.children && node.children.length > 0) {
|
|
node.properties = {
|
|
...node.properties,
|
|
dir: 'auto'
|
|
};
|
|
}
|
|
});
|
|
};
|
|
};
|