wysimark-lite 0.15.7 → 0.16.0

package/dist/index.mjs

@@ -4,13 +4,13 @@ import {
   useCallback as useCallback16,
   useImperativeHandle,
   useRef as useRef13,
-  useState as useState12
+  useState as useState13
 } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/entry/index.tsx
 import throttle3 from "lodash.throttle";
-import { useCallback as useCallback15, useRef as useRef12 } from "react";
+import { useCallback as useCallback15, useRef as useRef12, useState as useState12 } from "react";
 import { Editor as Editor59, Transforms as Transforms41 } from "slate";
 import { ReactEditor as ReactEditor17, Slate as Slate2 } from "slate-react";
 
@@ -137,6 +137,29 @@ function customRemarkGfm() {
 }
 
 // src/convert/utils.ts
+function escapeUrlSlashes(text) {
+  const markdownLinkPattern = /\[([^\]]+)\]\(([^)]+)\)/g;
+  const links = [];
+  let linkIndex = 0;
+  const textWithoutLinks = text.replace(markdownLinkPattern, (match) => {
+    links.push(match);
+    return `__MARKDOWN_LINK_${linkIndex++}__`;
+  });
+  const urlPattern = /(https?:\/\/[^\s]+)/g;
+  const textWithEscapedUrls = textWithoutLinks.replace(urlPattern, (url) => {
+    return url.replace(/\//g, "\\/");
+  });
+  let result = textWithEscapedUrls;
+  for (let i = 0; i < links.length; i++) {
+    result = result.replace(`__MARKDOWN_LINK_${i}__`, links[i]);
+  }
+  return result;
+}
+function unescapeUrlSlashes(text) {
+  return text.replace(/\\(.)/g, (match, char) => {
+    return char;
+  });
+}
 function assert(pass, message) {
   if (!pass)
     throw new Error(`${message}`);
@@ -1467,6 +1490,104 @@ function serialize(elements) {
   return serializeElements(normalizedElements);
 }
 
+// src/utils/translations.ts
+var translations = {
+  ja: {
+    bold: "\u592A\u5B57",
+    italic: "\u659C\u4F53",
+    strike: "\u53D6\u308A\u6D88\u3057\u7DDA",
+    inlineCode: "\u30A4\u30F3\u30E9\u30A4\u30F3\u30B3\u30FC\u30C9",
+    underline: "\u4E0B\u7DDA",
+    increaseDepth: "\u968E\u5C64\u3092\u6DF1\u304F\u3059\u308B",
+    decreaseDepth: "\u968E\u5C64\u3092\u6D45\u304F\u3059\u308B",
+    heading1: "\u898B\u51FA\u30571",
+    heading2: "\u898B\u51FA\u30572",
+    heading3: "\u898B\u51FA\u30573",
+    normal: "\u6A19\u6E96",
+    paragraph: "\u6BB5\u843D",
+    paragraphStyle: "\u6BB5\u843D\u30B9\u30BF\u30A4\u30EB",
+    bulletList: "\u7B87\u6761\u66F8\u304D",
+    numberedList: "\u756A\u53F7\u4ED8\u304D\u30EA\u30B9\u30C8",
+    checkList: "\u30C1\u30A7\u30C3\u30AF\u30EA\u30B9\u30C8",
+    list: "\u30EA\u30B9\u30C8",
+    linkUrl: "\u30EA\u30F3\u30AF\u306EURL",
+    tooltipText: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u30C6\u30AD\u30B9\u30C8",
+    tooltipHint: "\u30DE\u30A6\u30B9\u30DB\u30D0\u30FC\u6642\u306B\u8868\u793A\u3055\u308C\u308B\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7",
+    apply: "\u9069\u7528",
+    cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB",
+    insertLink: "\u30EA\u30F3\u30AF\u306E\u633F\u5165",
+    quote: "\u5F15\u7528",
+    insertTable: "\u8868\u306E\u633F\u5165",
+    insertImage: "\u753B\u50CF\u306E\u633F\u5165",
+    insertImageFromUrl: "URL\u304B\u3089\u753B\u50CF\u3092\u633F\u5165",
+    insert: "\u633F\u5165",
+    imageUrlRequired: "\u753B\u50CFURL\uFF08\u5FC5\u9808\uFF09\uFF1A",
+    altText: "\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8\uFF1A",
+    title: "\u30BF\u30A4\u30C8\u30EB\uFF1A",
+    imageDescription: "\u753B\u50CF\u306E\u8AAC\u660E",
+    imageTitle: "\u753B\u50CF\u306E\u30BF\u30A4\u30C8\u30EB",
+    switchToVisualEditor: "\u30D3\u30B8\u30E5\u30A2\u30EB\u30A8\u30C7\u30A3\u30BF\u306B\u5207\u308A\u66FF\u3048",
+    switchToRawMarkdown: "\u30DE\u30FC\u30AF\u30C0\u30A6\u30F3\u8868\u793A\u306B\u5207\u308A\u66FF\u3048"
+  },
+  en: {
+    bold: "Bold",
+    italic: "Italic",
+    strike: "Strikethrough",
+    inlineCode: "Inline Code",
+    underline: "Underline",
+    increaseDepth: "Increase Depth",
+    decreaseDepth: "Decrease Depth",
+    heading1: "Heading 1",
+    heading2: "Heading 2",
+    heading3: "Heading 3",
+    normal: "Normal",
+    paragraph: "Paragraph",
+    paragraphStyle: "Paragraph Style",
+    bulletList: "Bullet List",
+    numberedList: "Numbered List",
+    checkList: "Check List",
+    list: "List",
+    linkUrl: "Link URL",
+    tooltipText: "Tooltip Text",
+    tooltipHint: "Tooltip shown on mouse hover",
+    apply: "Apply",
+    cancel: "Cancel",
+    insertLink: "Insert Link",
+    quote: "Quote",
+    insertTable: "Insert Table",
+    insertImage: "Insert Image",
+    insertImageFromUrl: "Insert Image from URL",
+    insert: "Insert",
+    imageUrlRequired: "Image URL (required):",
+    altText: "Alt Text:",
+    title: "Title:",
+    imageDescription: "Description of the image",
+    imageTitle: "Image title",
+    switchToVisualEditor: "Switch to visual editor",
+    switchToRawMarkdown: "Switch to raw markdown"
+  }
+};
+var getLanguage = () => {
+  try {
+    if (typeof window !== "undefined" && window.navigator) {
+      return window.navigator.language.split("-")[0];
+    }
+  } catch (e) {
+  }
+  return "en";
+};
+var t = (key2) => {
+  const lang = getLanguage();
+  return translations[lang === "ja" ? "ja" : "en"][key2];
+};
+var r = (value) => {
+  const lang = getLanguage();
+  const key2 = Object.keys(translations[lang === "ja" ? "ja" : "en"]).find(
+    (k) => translations[lang === "ja" ? "ja" : "en"][k] === value
+  );
+  return key2 || "";
+};
+
 // src/sink/create-plugin/index.ts
 var createPlugin = (fn) => {
   return { fn };
@@ -2959,98 +3080,6 @@ import styled13 from "@emotion/styled";
 import { useCallback as useCallback3, useRef as useRef3, useState as useState3 } from "react";
 import { useSlateStatic as useSlateStatic3 } from "slate-react";
 
-// src/utils/translations.ts
-var translations = {
-  ja: {
-    bold: "\u592A\u5B57",
-    italic: "\u659C\u4F53",
-    strike: "\u53D6\u308A\u6D88\u3057\u7DDA",
-    inlineCode: "\u30A4\u30F3\u30E9\u30A4\u30F3\u30B3\u30FC\u30C9",
-    underline: "\u4E0B\u7DDA",
-    increaseDepth: "\u968E\u5C64\u3092\u6DF1\u304F\u3059\u308B",
-    decreaseDepth: "\u968E\u5C64\u3092\u6D45\u304F\u3059\u308B",
-    heading1: "\u898B\u51FA\u30571",
-    heading2: "\u898B\u51FA\u30572",
-    heading3: "\u898B\u51FA\u30573",
-    paragraph: "\u6BB5\u843D",
-    paragraphStyle: "\u6BB5\u843D\u30B9\u30BF\u30A4\u30EB",
-    bulletList: "\u7B87\u6761\u66F8\u304D",
-    numberedList: "\u756A\u53F7\u4ED8\u304D\u30EA\u30B9\u30C8",
-    checkList: "\u30C1\u30A7\u30C3\u30AF\u30EA\u30B9\u30C8",
-    list: "\u30EA\u30B9\u30C8",
-    linkUrl: "\u30EA\u30F3\u30AF\u306EURL",
-    tooltipText: "\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7\u30C6\u30AD\u30B9\u30C8",
-    tooltipHint: "\u30DE\u30A6\u30B9\u30DB\u30D0\u30FC\u6642\u306B\u8868\u793A\u3055\u308C\u308B\u30C4\u30FC\u30EB\u30C1\u30C3\u30D7",
-    apply: "\u9069\u7528",
-    cancel: "\u30AD\u30E3\u30F3\u30BB\u30EB",
-    insertLink: "\u30EA\u30F3\u30AF\u306E\u633F\u5165",
-    quote: "\u5F15\u7528",
-    insertTable: "\u8868\u306E\u633F\u5165",
-    insertImage: "\u753B\u50CF\u306E\u633F\u5165",
-    insertImageFromUrl: "URL\u304B\u3089\u753B\u50CF\u3092\u633F\u5165",
-    insert: "\u633F\u5165",
-    imageUrlRequired: "\u753B\u50CFURL\uFF08\u5FC5\u9808\uFF09\uFF1A",
-    altText: "\u4EE3\u66FF\u30C6\u30AD\u30B9\u30C8\uFF1A",
-    title: "\u30BF\u30A4\u30C8\u30EB\uFF1A",
-    imageDescription: "\u753B\u50CF\u306E\u8AAC\u660E",
-    imageTitle: "\u753B\u50CF\u306E\u30BF\u30A4\u30C8\u30EB"
-  },
-  en: {
-    bold: "Bold",
-    italic: "Italic",
-    strike: "Strikethrough",
-    inlineCode: "Inline Code",
-    underline: "Underline",
-    increaseDepth: "Increase Depth",
-    decreaseDepth: "Decrease Depth",
-    heading1: "Heading 1",
-    heading2: "Heading 2",
-    heading3: "Heading 3",
-    paragraph: "Paragraph",
-    paragraphStyle: "Paragraph Style",
-    bulletList: "Bullet List",
-    numberedList: "Numbered List",
-    checkList: "Check List",
-    list: "List",
-    linkUrl: "Link URL",
-    tooltipText: "Tooltip Text",
-    tooltipHint: "Tooltip shown on mouse hover",
-    apply: "Apply",
-    cancel: "Cancel",
-    insertLink: "Insert Link",
-    quote: "Quote",
-    insertTable: "Insert Table",
-    insertImage: "Insert Image",
-    insertImageFromUrl: "Insert Image from URL",
-    insert: "Insert",
-    imageUrlRequired: "Image URL (required):",
-    altText: "Alt Text:",
-    title: "Title:",
-    imageDescription: "Description of the image",
-    imageTitle: "Image title"
-  }
-};
-var getLanguage = () => {
-  try {
-    if (typeof window !== "undefined" && window.navigator) {
-      return window.navigator.language.split("-")[0];
-    }
-  } catch (e) {
-  }
-  return "en";
-};
-var t = (key2) => {
-  const lang = getLanguage();
-  return translations[lang === "ja" ? "ja" : "en"][key2];
-};
-var r = (value) => {
-  const lang = getLanguage();
-  const key2 = Object.keys(translations[lang === "ja" ? "ja" : "en"]).find(
-    (k) => translations[lang === "ja" ? "ja" : "en"][k] === value
-  );
-  return key2 || "";
-};
-
 // src/shared-styles/index.ts
 import styled12 from "@emotion/styled";
 var $FormGroup = styled12("div")`
@@ -7081,7 +7110,7 @@ var LinkPlus = () => /* @__PURE__ */ jsx52(TablerIcon, { width: "0.5em", viewBox
 var H1 = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M19 18v-8l-2 2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
 var H2 = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M17 12a2 2 0 1 1 4 0c0 .591-.417 1.318-.816 1.858L17 18.001h4M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
 var H3 = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M19 14a2 2 0 1 0-2-2M17 16a2 2 0 1 0 2-2M4 6v12M12 6v12M11 18h2M3 18h2M4 12h8M3 6h2M11 6h2" }) });
-var Paragraph2 = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M7 20V4h5.5a4 4 0 0 1 0 9H7" }) });
+var Normal = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M8 18V6h2l6 9V6h2v12h-2l-6-9v9H8z" }) });
 var Bold = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M7 5h6a3.5 3.5 0 0 1 0 7H7zM13 12h1a3.5 3.5 0 0 1 0 7H7v-7" }) });
 var Italic = () => /* @__PURE__ */ jsx52(TablerIcon, { children: /* @__PURE__ */ jsx52("path", { d: "M11 5h6M7 19h6M14 5l-4 14" }) });
 var Link = () => /* @__PURE__ */ jsxs26(TablerIcon, { children: [
@@ -7136,6 +7165,14 @@ var listDepthItems = [
   }
 ];
 var blockItems = [
+  {
+    icon: Normal,
+    title: t("normal"),
+    hotkey: "super+0",
+    action: (editor) => {
+      editor.collapsibleParagraph.convertParagraph();
+    }
+  },
   {
     icon: H1,
     title: t("heading1"),
@@ -7156,14 +7193,6 @@ var blockItems = [
     hotkey: "super+3",
     action: (editor) => editor.heading.convertHeading(3, true),
     active: (editor) => editor.heading.isHeadingActive(3)
-  },
-  {
-    icon: Paragraph2,
-    title: t("paragraph"),
-    hotkey: "super+0",
-    action: (editor) => {
-      editor.collapsibleParagraph.convertParagraph();
-    }
   }
 ];
 var expandedBlockItems = [...blockItems, "divider", ...listDepthItems];
@@ -7965,7 +7994,7 @@ function useEditor({
 }
 
 // src/entry/index.tsx
-import { jsx as jsx59 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs31 } from "react/jsx-runtime";
 function renderLeaf({ children, attributes }) {
   return /* @__PURE__ */ jsx59("span", { ...attributes, children });
 }
@@ -7978,6 +8007,8 @@ function Editable2({
   className,
   style
 }) {
+  const [isRawMode, setIsRawMode] = useState12(false);
+  const [rawText, setRawText] = useState12(value);
   const ignoreNextChangeRef = useRef12(false);
   const initialValueRef = useRef12(void 0);
   const prevValueRef = useRef12(void 0);
@@ -8005,8 +8036,8 @@ function Editable2({
   }, [onThrottledSlateChange]);
   if (editor.wysimark.prevValue == null || initialValueRef.current == null) {
     ignoreNextChangeRef.current = true;
-    const escapedValue = escapeUrlSlashes(value);
-    const children = parse(escapedValue);
+    const valueToProcess = isRawMode ? value : escapeUrlSlashes(value);
+    const children = parse(valueToProcess);
     prevValueRef.current = initialValueRef.current = children;
     editor.wysimark.prevValue = {
       markdown: value,
@@ -8016,8 +8047,8 @@ function Editable2({
   } else {
     if (value !== editor.wysimark.prevValue.markdown) {
       ignoreNextChangeRef.current = true;
-      const escapedValue = escapeUrlSlashes(value);
-      const documentValue = parse(escapedValue);
+      const valueToProcess = isRawMode ? value : escapeUrlSlashes(value);
+      const documentValue = parse(valueToProcess);
       editor.children = documentValue;
       editor.selection = null;
       Transforms41.select(editor, Editor59.start(editor, [0]));
@@ -8031,52 +8062,148 @@ function Editable2({
   const onBlur = useCallback15(() => {
     onThrottledSlateChange.flush();
   }, [onThrottledSlateChange]);
-  return /* @__PURE__ */ jsx59(
-    Slate2,
-    {
-      editor,
-      value: initialValueRef.current,
-      onChange: onSlateChange,
-      children: /* @__PURE__ */ jsx59(
-        SinkEditable2,
-        {
-          renderLeaf,
-          onMouseDown: onSinkeEditableMouseDown,
-          onBlur,
-          placeholder,
-          className,
-          style
-        }
-      )
+  const handleRawTextChange = (e) => {
+    const newText = e.target.value;
+    setRawText(newText);
+    onChange(newText);
+  };
+  const applyRawTextToEditor = useCallback15(() => {
+    if (rawText !== editor.getMarkdown()) {
+      editor.setMarkdown(rawText);
     }
-  );
+  }, [editor, rawText]);
+  const updateRawTextFromEditor = useCallback15(() => {
+    const currentMarkdown = editor.getMarkdown();
+    setRawText(currentMarkdown);
+  }, [editor]);
+  const handleRawModeToggle = () => {
+    if (isRawMode) {
+      applyRawTextToEditor();
+    } else {
+      updateRawTextFromEditor();
+    }
+    setIsRawMode(!isRawMode);
+  };
+  return /* @__PURE__ */ jsxs31("div", { style: { position: "relative" }, children: [
+    /* @__PURE__ */ jsx59("div", { style: { position: "absolute", top: "5px", right: "25px", zIndex: 10 }, children: /* @__PURE__ */ jsx59(
+      "button",
+      {
+        onClick: handleRawModeToggle,
+        style: {
+          background: "none",
+          border: isRawMode ? "1px solid #4a90e2" : "1px solid transparent",
+          cursor: "pointer",
+          padding: "6px",
+          borderRadius: "4px",
+          backgroundColor: isRawMode ? "rgba(74, 144, 226, 0.1)" : "transparent",
+          boxShadow: isRawMode ? "0 1px 3px rgba(0, 0, 0, 0.1)" : "none",
+          transition: "all 0.2s ease-in-out",
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "center"
+        },
+        title: isRawMode ? t("switchToVisualEditor") : t("switchToRawMarkdown"),
+        children: /* @__PURE__ */ jsxs31("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: [
+          /* @__PURE__ */ jsx59(
+            "rect",
+            {
+              x: "3",
+              y: "3",
+              width: "18",
+              height: "18",
+              rx: "2",
+              stroke: isRawMode ? "#4a90e2" : "currentColor",
+              strokeWidth: "1.5",
+              fill: isRawMode ? "rgba(74, 144, 226, 0.05)" : "transparent"
+            }
+          ),
+          /* @__PURE__ */ jsx59(
+            "path",
+            {
+              d: "M7 15V9L10 12L13 9V15",
+              stroke: isRawMode ? "#4a90e2" : "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx59(
+            "path",
+            {
+              d: "M16 9H18V15",
+              stroke: isRawMode ? "#4a90e2" : "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          ),
+          /* @__PURE__ */ jsx59(
+            "path",
+            {
+              d: "M16 12H18",
+              stroke: isRawMode ? "#4a90e2" : "currentColor",
+              strokeWidth: "1.5",
+              strokeLinecap: "round",
+              strokeLinejoin: "round"
+            }
+          )
+        ] })
+      }
+    ) }),
+    /* @__PURE__ */ jsx59("div", { style: { display: isRawMode ? "block" : "none", textAlign: "center" }, children: /* @__PURE__ */ jsx59(
+      "textarea",
+      {
+        value: unescapeUrlSlashes(rawText).replace(/&nbsp;/g, ""),
+        onChange: handleRawTextChange,
+        placeholder,
+        className,
+        style: {
+          width: "calc(100% - 60px)",
+          /* Full width minus 200px on each side */
+          margin: "0 auto",
+          /* Center the textarea */
+          minHeight: "200px",
+          padding: "20px",
+          fontFamily: "monospace",
+          fontSize: "14px",
+          color: "#333",
+          lineHeight: "1.5",
+          backgroundColor: "#fff",
+          border: "1px solid #ddd",
+          borderRadius: "4px",
+          ...style
+        }
+      }
+    ) }),
+    /* @__PURE__ */ jsx59("div", { style: { display: isRawMode ? "none" : "block" }, children: /* @__PURE__ */ jsx59(
+      Slate2,
+      {
+        editor,
+        value: initialValueRef.current,
+        onChange: onSlateChange,
+        children: /* @__PURE__ */ jsx59(
+          SinkEditable2,
+          {
+            renderLeaf,
+            onMouseDown: onSinkeEditableMouseDown,
+            onBlur,
+            placeholder,
+            className,
+            style
+          }
+        )
+      }
+    ) })
+  ] });
 }
 
 // src/index.tsx
 import { jsx as jsx60 } from "react/jsx-runtime";
-function escapeUrlSlashes(text) {
-  const markdownLinkPattern = /\[([^\]]+)\]\(([^)]+)\)/g;
-  const links = [];
-  let linkIndex = 0;
-  const textWithoutLinks = text.replace(markdownLinkPattern, (match) => {
-    links.push(match);
-    return `__MARKDOWN_LINK_${linkIndex++}__`;
-  });
-  const urlPattern = /(https?:\/\/[^\s]+)/g;
-  const textWithEscapedUrls = textWithoutLinks.replace(urlPattern, (url) => {
-    return url.replace(/\//g, "\\/");
-  });
-  let result = textWithEscapedUrls;
-  for (let i = 0; i < links.length; i++) {
-    result = result.replace(`__MARKDOWN_LINK_${i}__`, links[i]);
-  }
-  return result;
-}
 function StandaloneEditor({
   standaloneOptions: { onChange, placeholder, className, ...options },
   standaloneMethodsRef
 }) {
-  const [markdown, setMarkdown] = useState12(options.initialMarkdown || "");
+  const [markdown, setMarkdown] = useState13(options.initialMarkdown || "");
   const markdownRef = useRef13(markdown);
   const editor = useEditor(options);
   markdownRef.current = markdown;
@@ -8144,7 +8271,6 @@ function createWysimark(containerElement, options) {
 export {
   Editable2 as Editable,
   createWysimark,
-  escapeUrlSlashes,
   useEditor
 };
 //# sourceMappingURL=index.mjs.map