Revert "Fix RTL text direction rendering (#1687)" (#1705)

This reverts commit a118bed82f898a365cf5f71ed32f69f51fd08a47.

src/data/index.ts

@@ -330,6 +330,7 @@ export const exportCanvas = async (
     shouldAddWatermark,
   });
   tempCanvas.style.display = "none";
+  document.body.appendChild(tempCanvas);
 
   if (type === "png") {
     const fileName = `${name}.png`;

src/renderer/renderElement.ts

@@ -14,13 +14,7 @@ import { Drawable, Options } from "roughjs/bin/core";
 import { RoughSVG } from "roughjs/bin/svg";
 import { RoughGenerator } from "roughjs/bin/generator";
 import { SceneState } from "../scene/types";
-import {
-  SVG_NS,
-  distance,
-  getFontString,
-  getFontFamilyString,
-  isRTL,
-} from "../utils";
+import { SVG_NS, distance, getFontString, getFontFamilyString } from "../utils";
 import { isPathALoop } from "../math";
 import rough from "roughjs/bin/rough";
 
@@ -44,11 +38,6 @@ const generateElementCanvas = (
   const canvas = document.createElement("canvas");
   const context = canvas.getContext("2d")!;
 
-  // To be able to draw a nested element with RTL, we have to append it to the DOM
-  canvas.style.display = "none";
-  canvas.id = "nested-canvas-element";
-  document.body.appendChild(canvas);
-
   let canvasOffsetX = 0;
   let canvasOffsetY = 0;
 
@@ -111,14 +100,12 @@ const drawElementOnCanvas = (
     }
     default: {
       if (isTextElement(element)) {
-        context.canvas.setAttribute("dir", isRTL(element.text) ? "rtl" : "ltr");
         const font = context.font;
         context.font = getFontString(element);
         const fillStyle = context.fillStyle;
         context.fillStyle = element.strokeColor;
         const textAlign = context.textAlign;
         context.textAlign = element.textAlign as CanvasTextAlign;
-
         // Canvas does not support multiline text by default
         const lines = element.text.replace(/\r\n?/g, "\n").split("\n");
         const lineHeight = element.height / lines.length;
@@ -132,7 +119,7 @@ const drawElementOnCanvas = (
         for (let i = 0; i < lines.length; i++) {
           context.fillText(
             lines[i],
-            horizontalOffset,
+            0 + horizontalOffset,
             (i + 1) * lineHeight - verticalOffset,
           );
         }
@@ -355,12 +342,6 @@ const drawElementFromCanvas = (
   context.rotate(-element.angle);
   context.translate(-cx, -cy);
   context.scale(window.devicePixelRatio, window.devicePixelRatio);
-
-  // Clear the nested element we appended to the DOM
-  const node = document.querySelector("#nested-canvas-element");
-  if (node && node.parentNode) {
-    node.parentNode.removeChild(node);
-  }
 };
 
 export const renderElement = (
@@ -394,12 +375,9 @@ export const renderElement = (
     case "draw":
     case "arrow":
     case "text": {
+      const elementWithCanvas = generateElement(element, generator, sceneState);
+
       if (renderOptimizations) {
-        const elementWithCanvas = generateElement(
-          element,
-          generator,
-          sceneState,
-        );
         drawElementFromCanvas(elementWithCanvas, rc, context, sceneState);
       } else {
         const [x1, y1, x2, y2] = getElementAbsoluteCoords(element);
@@ -509,14 +487,17 @@ export const renderElementToSvg = (
         const lineHeight = element.height / lines.length;
         const verticalOffset = element.height - element.baseline;
         const horizontalOffset =
-          element.textAlign === "center" ? element.width / 2 : element.width;
+          element.textAlign === "center"
+            ? element.width / 2
+            : element.textAlign === "right"
+            ? element.width
+            : 0;
         const textAnchor =
           element.textAlign === "center"
             ? "middle"
             : element.textAlign === "right"
             ? "end"
             : "start";
-        const direction = isRTL(element.text) ? "rtl" : "ltr";
         for (let i = 0; i < lines.length; i++) {
           const text = svgRoot.ownerDocument!.createElementNS(SVG_NS, "text");
           text.textContent = lines[i];
@@ -527,7 +508,6 @@ export const renderElementToSvg = (
           text.setAttribute("fill", element.strokeColor);
           text.setAttribute("text-anchor", textAnchor);
           text.setAttribute("style", "white-space: pre;");
-          text.setAttribute("direction", direction);
           node.appendChild(text);
         }
         svgRoot.appendChild(node);

src/scene/export.ts

@@ -32,8 +32,6 @@ export const exportToCanvas = (
     const tempCanvas = document.createElement("canvas");
     tempCanvas.width = width * scale;
     tempCanvas.height = height * scale;
-    // We append the canvas before drawing it to it for RTL to work
-    document.body.appendChild(tempCanvas);
     return tempCanvas;
   },
 ) => {

src/utils.ts

@@ -227,13 +227,3 @@ export const sceneCoordsToViewportCoords = (
 
 export const getGlobalCSSVariable = (name: string) =>
   getComputedStyle(document.documentElement).getPropertyValue(`--${name}`);
-
-export const isRTL = (text: string) => {
-  const ltrChars =
-    "A-Za-z\u00C0-\u00D6\u00D8-\u00F6\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF" +
-    "\u2C00-\uFB1C\uFDFE-\uFE6F\uFEFD-\uFFFF";
-  const rtlChars = "\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC";
-  const rtlDirCheck = new RegExp(`^[^${ltrChars}]*[${rtlChars}]`);
-
-  return rtlDirCheck.test(text);
-};