Fix rtl text rendering (#21382)
* 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
This commit is contained in:
@@ -0,0 +1,28 @@
|
||||
/**
|
||||
* 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'
|
||||
};
|
||||
}
|
||||
});
|
||||
};
|
||||
};
|
||||
Reference in New Issue
Block a user