trotl-texteditor 1.0.10 → 1.0.13

package/dist/index.cjs

@@ -87,6 +87,16 @@ function CodeBlock({
   }));
 }
 
+const DEFAULT_HTML = `
+	<h1>Welcome</h1>
+	<p>This is a lightweight WYSIWYG editor built without external libraries.</p>
+	<ul>
+		<li>Edit text directly</li>
+		<li>Use the toolbar for formatting</li>
+		<li>Copy, paste, and export HTML</li>
+	</ul>
+`;
+
 const COMMANDS = [{
   cmd: "bold",
   label: "Bold",
@@ -124,24 +134,287 @@ const COMMANDS = [{
   label: "Right",
   icon: "⟹"
 }];
+
+const escapeHtml = value => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#039;");
+const exec = (editorRef, cmd, value = null, setHtml, onChange, updateToolbarState) => {
+  editorRef.current?.focus();
+  document.execCommand(cmd, false, value);
+  const nextHtml = editorRef.current?.innerHTML || "";
+  setHtml(nextHtml);
+  onChange({
+    html: nextHtml,
+    text: editorRef.current?.innerText || ""
+  });
+  updateToolbarState();
+};
+const clearAll = (editorRef, setHtml, onChange, updateToolbarState) => {
+  if (!editorRef.current) return;
+  editorRef.current.innerHTML = "<p></p>";
+  setHtml(editorRef.current.innerHTML);
+  onChange({
+    html: editorRef.current.innerHTML,
+    text: editorRef.current.innerText || ""
+  });
+  updateToolbarState();
+};
+const exportHtml = async editorRef => {
+  const payload = editorRef.current?.innerHTML || "";
+  await navigator.clipboard.writeText(payload);
+  alert("HTML copied to clipboard.");
+};
+
+const applyHeading = (next, exec) => {
+  if (next === "p") {
+    exec("formatBlock", "P");
+    return;
+  }
+  if (next === "pre") {
+    exec("formatBlock", "PRE");
+    return;
+  }
+  exec("formatBlock", next.toUpperCase());
+};
+const applyFontSize = (next, exec, editorRef, setHtml, updateToolbarState) => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  if (range.collapsed) return; // No selection
+
+  exec("fontSize", "7");
+  const fontElements = editorRef.current?.querySelectorAll("font[size='7']") || [];
+  fontElements.forEach(el => {
+    el.removeAttribute("size");
+    el.style.fontSize = `${next}px`;
+  });
+  setHtml(editorRef.current?.innerHTML || "");
+  updateToolbarState();
+};
+const applyCustomFontSize = (value, exec, editorRef, setHtml, updateToolbarState) => {
+  if (!value || isNaN(value)) return;
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const range = selection.getRangeAt(0);
+  if (range.collapsed) return; // No selection
+
+  exec("fontSize", "7");
+  const fontElements = editorRef.current?.querySelectorAll("font[size='7']") || [];
+  fontElements.forEach(el => {
+    el.removeAttribute("size");
+    el.style.fontSize = `${value}px`;
+  });
+  setHtml(editorRef.current?.innerHTML || "");
+  updateToolbarState();
+};
+const applyTextColor = (next, exec) => {
+  exec("foreColor", next);
+};
+const applyBackgroundColor = (next, exec) => {
+  exec("hiliteColor", next);
+};
+const resetColors = (theme, setTextColor, setBackgroundColor, exec) => {
+  const defaultText = theme === "dark" ? "#e5e7eb" : "#1f2937";
+  const defaultBg = "#ffff00";
+  setTextColor(defaultText);
+  setBackgroundColor(defaultBg);
+  exec("removeFormat");
+};
+
+const insertCodeBlock = (codeValue, codeLanguage, codeTheme, exec, setIsCodeModalOpen, setCodeValue) => {
+  const safeCode = escapeHtml(codeValue || "");
+  const languageClass = codeLanguage ? `language-${codeLanguage}` : "language-plain";
+  const htmlBlock = `<pre class="code-block-shell" data-theme="${codeTheme}"><code class="${languageClass}">${safeCode}</code></pre>`;
+  exec("insertHTML", htmlBlock);
+  setIsCodeModalOpen(false);
+  setCodeValue("");
+};
+const insertLink = exec => {
+  const url = window.prompt("Enter URL", "https://");
+  if (!url) return;
+  exec("createLink", url);
+};
+const insertTooltip = (editorRef, setHtml, onChange, updateToolbarState) => {
+  const selection = window.getSelection();
+  if (!selection || selection.rangeCount === 0) return;
+  const selectedText = selection.toString();
+  if (!selectedText) {
+    alert("Please select some text first");
+    return;
+  }
+  const tooltip = window.prompt("Enter tooltip/note text", "");
+  if (!tooltip) return;
+  const range = selection.getRangeAt(0);
+  const span = document.createElement("span");
+  span.className = "has-tooltip";
+  span.title = tooltip;
+  try {
+    range.surroundContents(span);
+  } catch {
+    // If surroundContents fails, use alternative method
+    span.appendChild(range.extractContents());
+    range.insertNode(span);
+  }
+  selection.removeAllRanges();
+  const nextHtml = editorRef.current?.innerHTML || "";
+  setHtml(nextHtml);
+  onChange({
+    html: nextHtml,
+    text: editorRef.current?.innerText || ""
+  });
+  updateToolbarState();
+};
+const insertAnchor = exec => {
+  const id = window.prompt("Enter anchor ID", "");
+  if (!id) return;
+  const sanitizedId = id.replace(/[^a-zA-Z0-9-_]/g, "");
+  const anchorHtml = `<span class="anchor-marker" id="${sanitizedId}" data-anchor="${sanitizedId}">⚓${sanitizedId}</span>`;
+  exec("insertHTML", anchorHtml);
+};
+const insertHr = exec => {
+  exec("insertHTML", "<hr>");
+};
+const insertImage = exec => {
+  const url = window.prompt("Enter image URL", "https://");
+  if (!url) return;
+  const alt = window.prompt("Enter image description (alt text)", "");
+  const imageHtml = `<img src="${url}" alt="${alt || ''}" style="max-width: 100%; height: auto;" />`;
+  exec("insertHTML", imageHtml);
+};
+const insertVideo = exec => {
+  const url = window.prompt("Enter video URL (YouTube, MP4, etc.)", "https://");
+  if (!url) return;
+
+  // Check if it's a YouTube URL
+  const youtubeMatch = url.match(/(?:youtube\.com\/watch\?v=|youtu\.be\/)([^&\s]+)/);
+  if (youtubeMatch) {
+    const videoId = youtubeMatch[1];
+    const embedHtml = `<iframe width="560" height="315" src="https://www.youtube.com/embed/${videoId}" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen style="max-width: 100%;"></iframe>`;
+    exec("insertHTML", embedHtml);
+  } else {
+    // Assume it's a direct video URL
+    const videoHtml = `<video controls style="max-width: 100%; height: auto;"><source src="${url}" type="video/mp4">Your browser does not support the video tag.</video>`;
+    exec("insertHTML", videoHtml);
+  }
+};
+
+const onInput = (editorRef, setHtml, onChange, updateToolbarState) => {
+  const nextHtml = editorRef.current?.innerHTML || "";
+  setHtml(nextHtml);
+  onChange({
+    html: nextHtml,
+    text: editorRef.current?.innerText || ""
+  });
+  updateToolbarState();
+};
+const onPaste = (event, plainPaste) => {
+  if (!plainPaste) return;
+  event.preventDefault();
+  const text = event.clipboardData.getData("text/plain");
+  document.execCommand("insertText", false, text);
+};
+const createUpdateToolbarState = (editorRef, setSelectionText, setActiveToolMap) => {
+  return () => {
+    const selection = document.getSelection();
+    if (!selection || selection.rangeCount === 0 || !editorRef.current) return;
+    const anchorNode = selection.anchorNode;
+    const isInsideEditor = anchorNode && editorRef.current.contains(anchorNode);
+    if (!isInsideEditor) {
+      setSelectionText("");
+      setActiveToolMap({});
+      return;
+    }
+    setSelectionText(selection.toString());
+    const nextActive = {};
+    COMMANDS.forEach(item => {
+      try {
+        nextActive[item.cmd] = document.queryCommandState(item.cmd);
+      } catch {
+        nextActive[item.cmd] = false;
+      }
+    });
+    setActiveToolMap(nextActive);
+  };
+};
+
 function Editor({
   theme = "dark",
   tools = COMMANDS.map(item => item.cmd),
+  showDemoText = false,
   showHeading = true,
   showFontSize = true,
   showAlign = true,
   showLink = true,
+  showTooltip = true,
+  showAnchor = true,
+  showHr = true,
+  showMedia = true,
   showUndoRedo = true,
   showClear = true,
   showPlainPaste = true,
   showColor = true,
+  showFullscreen = true,
   codeBlock = false,
   codeBlockLanguages,
   showLiveHtml = true,
   showStats = true,
   showCopyHtml = true,
-  onChange = () => {}
+  onChange = () => {},
+  initialHtml = "",
+  t
 }) {
+  let translate;
+  if (t) {
+    translate = t;
+  } else {
+    translate = key => {
+      const translations = {
+        sample: "Sample Text",
+        Undo: "Undo",
+        Redo: "Redo",
+        Format: "Format",
+        Paragraph: "Paragraph",
+        "Heading 1": "Heading 1",
+        "Heading 2": "Heading 2",
+        "Heading 3": "Heading 3",
+        "Heading 4": "Heading 4",
+        Blockquote: "Blockquote",
+        "Code Block": "Code Block",
+        Size: "Size",
+        Custom: "Custom",
+        Font: "Font",
+        "Text color": "Text color",
+        Background: "Background",
+        "Background color": "Background color",
+        "Reset colors": "Reset colors",
+        "Insert code block": "Insert code block",
+        Align: "Align",
+        "Align Left": "Align Left",
+        "Align Center": "Align Center",
+        "Align Right": "Align Right",
+        Justify: "Justify",
+        "Add tooltip/note to selected text": "Add tooltip/note to selected text",
+        "Insert anchor": "Insert anchor",
+        "Insert horizontal line": "Insert horizontal line",
+        "Insert picture": "Insert picture",
+        "Insert video": "Insert video",
+        "Clear format": "Clear format",
+        "Clear all": "Clear all",
+        "Paste as plain text": "Paste as plain text",
+        "Exit fullscreen": "Exit fullscreen",
+        "Enter fullscreen": "Enter fullscreen",
+        words: "words",
+        characters: "characters",
+        selected: "selected",
+        "No selection": "No selection",
+        "Copy HTML": "Copy HTML",
+        "Live HTML": "Live HTML",
+        "Insert Code Block": "Insert Code Block",
+        "Paste your code here": "Paste your code here",
+        Cancel: "Cancel",
+        Insert: "Insert"
+      };
+      return translations[key] || key;
+    };
+  }
   const editorRef = React.useRef(null);
   const [html, setHtml] = React.useState("");
   const [plainPaste, setPlainPaste] = React.useState(true);
@@ -152,6 +425,7 @@ function Editor({
   const [textColor, setTextColor] = React.useState("#1f2937");
   const [backgroundColor, setBackgroundColor] = React.useState("#ffff00");
   const [activeToolMap, setActiveToolMap] = React.useState({});
+  const [isFullscreen, setIsFullscreen] = React.useState(false);
   const [isCodeModalOpen, setIsCodeModalOpen] = React.useState(false);
   const [codeValue, setCodeValue] = React.useState("");
   const [codeLanguage, setCodeLanguage] = React.useState("js");
@@ -160,12 +434,8 @@ function Editor({
     setCodeTheme(theme);
   }, [theme]);
 
-  // useEffect(() => {
-  // 	if (editorRef.current) {
-  // 		editorRef.current.innerHTML = DEFAULT_HTML;
-  // 		setHtml(editorRef.current.innerHTML);
-  // 	}
-  // }, []);
+  // NOTE: initialization for `initialHtml` / demo text moved below `updateToolbarState` declaration to avoid referencing
+  // `updateToolbarState` before it is defined. See the effect inserted later in the file.
 
   const stats = React.useMemo(() => {
     const text = editorRef.current?.innerText || "";
@@ -175,144 +445,128 @@ function Editor({
       chars: text.length
     };
   }, [html]);
-  const exec = (cmd, value = null) => {
-    editorRef.current?.focus();
-    document.execCommand(cmd, false, value);
-    const nextHtml = editorRef.current?.innerHTML || "";
-    setHtml(nextHtml);
-    onChange({
-      html: nextHtml,
-      text: editorRef.current?.innerText || ""
-    });
-    updateToolbarState();
+  const exec$1 = (cmd, value = null) => {
+    exec(editorRef, cmd, value, setHtml, onChange, updateToolbarState);
   };
-  const applyHeading = next => {
+  const applyHeading$1 = next => {
     setHeading(next);
-    if (next === "p") {
-      exec("formatBlock", "P");
-      return;
-    }
-    if (next === "pre") {
-      exec("formatBlock", "PRE");
-      return;
-    }
-    exec("formatBlock", next.toUpperCase());
+    applyHeading(next, exec$1);
   };
-  const applyFontSize = next => {
+  const applyFontSize$1 = next => {
     if (next === "custom") {
       setFontSize("custom");
       return;
     }
     setFontSize(next);
-    exec("fontSize", "7");
-    const fontElements = editorRef.current?.querySelectorAll("font[size='7']") || [];
-    fontElements.forEach(el => {
-      el.removeAttribute("size");
-      el.style.fontSize = `${next}px`;
-    });
-    setHtml(editorRef.current?.innerHTML || "");
-    updateToolbarState();
+    applyFontSize(next, exec$1, editorRef, setHtml, updateToolbarState);
   };
-  const applyCustomFontSize = value => {
+  const applyCustomFontSize$1 = value => {
     setCustomSize(value);
-    if (!value || isNaN(value)) return;
-    exec("fontSize", "7");
-    const fontElements = editorRef.current?.querySelectorAll("font[size='7']") || [];
-    fontElements.forEach(el => {
-      el.removeAttribute("size");
-      el.style.fontSize = `${value}px`;
-    });
-    setHtml(editorRef.current?.innerHTML || "");
-    updateToolbarState();
+    applyCustomFontSize(value, exec$1, editorRef, setHtml, updateToolbarState);
   };
-  const applyTextColor = next => {
+  const applyTextColor$1 = next => {
     setTextColor(next);
-    exec("foreColor", next);
+    applyTextColor(next, exec$1);
   };
-  const applyBackgroundColor = next => {
+  const applyBackgroundColor$1 = next => {
     setBackgroundColor(next);
-    exec("hiliteColor", next);
+    applyBackgroundColor(next, exec$1);
   };
-  const resetColors = () => {
-    const defaultText = theme === "dark" ? "#e5e7eb" : "#1f2937";
-    const defaultBg = "#ffff00";
-    setTextColor(defaultText);
-    setBackgroundColor(defaultBg);
-    exec("removeFormat");
+  const resetColors$1 = () => {
+    resetColors(theme, setTextColor, setBackgroundColor, exec$1);
   };
-  const escapeHtml = value => value.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/\"/g, "&quot;").replace(/'/g, "&#039;");
-  const insertCodeBlock = () => {
-    const safeCode = escapeHtml(codeValue || "");
-    const languageClass = codeLanguage ? `language-${codeLanguage}` : "language-plain";
-    const htmlBlock = `<pre class="code-block-shell" data-theme="${codeTheme}"><code class="${languageClass}">${safeCode}</code></pre>`;
-    exec("insertHTML", htmlBlock);
-    setIsCodeModalOpen(false);
-    setCodeValue("");
+  const insertCodeBlock$1 = () => {
+    insertCodeBlock(codeValue, codeLanguage, codeTheme, exec$1, setIsCodeModalOpen, setCodeValue);
   };
-  const insertLink = () => {
-    const url = window.prompt("Enter URL", "https://");
-    if (!url) return;
-    exec("createLink", url);
+  const insertLink$1 = () => {
+    insertLink(exec$1);
   };
-  const removeFormat = () => exec("removeFormat");
-  const clearAll = () => {
-    if (!editorRef.current) return;
-    editorRef.current.innerHTML = "<p></p>";
-    setHtml(editorRef.current.innerHTML);
-    onChange({
-      html: editorRef.current.innerHTML,
-      text: editorRef.current.innerText || ""
-    });
-    updateToolbarState();
+  const insertTooltip$1 = () => {
+    insertTooltip(editorRef, setHtml, onChange, updateToolbarState);
   };
-  const onInput = () => {
-    const nextHtml = editorRef.current?.innerHTML || "";
-    setHtml(nextHtml);
-    onChange({
-      html: nextHtml,
-      text: editorRef.current?.innerText || ""
-    });
-    updateToolbarState();
+  const insertAnchor$1 = () => {
+    insertAnchor(exec$1);
   };
-  const onPaste = event => {
-    if (!plainPaste) return;
-    event.preventDefault();
-    const text = event.clipboardData.getData("text/plain");
-    document.execCommand("insertText", false, text);
+  const insertHr$1 = () => {
+    insertHr(exec$1);
   };
-  const updateToolbarState = React.useCallback(() => {
-    const selection = document.getSelection();
-    if (!selection || selection.rangeCount === 0 || !editorRef.current) return;
-    const anchorNode = selection.anchorNode;
-    const isInsideEditor = anchorNode && editorRef.current.contains(anchorNode);
-    if (!isInsideEditor) {
-      setSelectionText("");
-      setActiveToolMap({});
-      return;
-    }
-    setSelectionText(selection.toString());
-    const nextActive = {};
-    COMMANDS.forEach(item => {
-      try {
-        nextActive[item.cmd] = document.queryCommandState(item.cmd);
-      } catch {
-        nextActive[item.cmd] = false;
+  const insertImage$1 = () => {
+    insertImage(exec$1);
+  };
+  const insertVideo$1 = () => {
+    insertVideo(exec$1);
+  };
+  const toggleFullscreen = () => {
+    setIsFullscreen(!isFullscreen);
+  };
+  const removeFormat = () => exec$1("removeFormat");
+  const clearAll$1 = () => {
+    clearAll(editorRef, setHtml, onChange, updateToolbarState);
+  };
+  const onInput$1 = () => {
+    onInput(editorRef, setHtml, onChange, updateToolbarState);
+    // Add key hint to all links
+    const links = editorRef.current?.querySelectorAll('a') || [];
+    links.forEach(link => {
+      if (!link.getAttribute('data-key-hint')) {
+        link.setAttribute('data-key-hint', 'Ctrl/Shift + Click to follow');
       }
     });
-    setActiveToolMap(nextActive);
-  }, []);
+  };
+  const onPaste$1 = event => {
+    onPaste(event, plainPaste);
+  };
+  const onEditorClick = event => {
+    if (event.target.tagName === 'A' && (event.ctrlKey || event.shiftKey || event.metaKey)) {
+      const href = event.target.getAttribute('href');
+      if (href) {
+        event.preventDefault();
+        window.open(href, '_blank');
+      }
+    }
+  };
+  const updateToolbarState = React.useCallback(createUpdateToolbarState(editorRef, setSelectionText, setActiveToolMap), []);
   React.useEffect(() => {
     document.addEventListener("selectionchange", updateToolbarState);
     return () => document.removeEventListener("selectionchange", updateToolbarState);
   }, [updateToolbarState]);
-  const exportHtml = async () => {
-    const payload = editorRef.current?.innerHTML || "";
-    await navigator.clipboard.writeText(payload);
-    alert("HTML copied to clipboard.");
+
+  // Initialize editor from `initialHtml` if provided; otherwise (when showDemoText)
+  // populate with demo content. Run after `updateToolbarState` is defined.
+  React.useEffect(() => {
+    if (initialHtml && editorRef.current) {
+      editorRef.current.innerHTML = initialHtml;
+      setHtml(initialHtml);
+      const links = editorRef.current?.querySelectorAll('a') || [];
+      links.forEach(link => {
+        if (!link.getAttribute('data-key-hint')) {
+          link.setAttribute('data-key-hint', 'Ctrl/Shift + Click to follow');
+        }
+      });
+      updateToolbarState();
+      try {
+        onChange(initialHtml);
+      } catch {/* noop */}
+      return;
+    }
+    if (showDemoText && editorRef.current) {
+      editorRef.current.innerHTML = DEFAULT_HTML;
+      setHtml(editorRef.current.innerHTML);
+      const links = editorRef.current?.querySelectorAll('a') || [];
+      links.forEach(link => {
+        if (!link.getAttribute('data-key-hint')) {
+          link.setAttribute('data-key-hint', 'Ctrl/Shift + Click to follow');
+        }
+      });
+      updateToolbarState();
+    }
+  }, [initialHtml, showDemoText, onChange, updateToolbarState]);
+  const exportHtml$1 = async () => {
+    await exportHtml(editorRef);
   };
   const activeCommands = React.useMemo(() => COMMANDS.filter(item => tools.includes(item.cmd)), [tools]);
   return /*#__PURE__*/React.createElement("section", {
-    className: `editor-root theme-${theme}${showLiveHtml ? " show-preview" : " no-preview"}`,
+    className: `editor-root theme-${theme}${showLiveHtml ? " show-preview" : " no-preview"}${isFullscreen ? " fullscreen" : ""}`,
     "data-theme": theme
   }, /*#__PURE__*/React.createElement("div", {
     className: "toolbar"
@@ -321,13 +575,13 @@ function Editor({
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
-    onClick: () => exec("undo"),
-    title: "Undo"
+    onClick: () => exec$1("undo"),
+    title: translate("Undo")
   }, "\u21B6"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
-    onClick: () => exec("redo"),
-    title: "Redo"
+    onClick: () => exec$1("redo"),
+    title: translate("Redo")
   }, "\u21B7")), /*#__PURE__*/React.createElement("span", {
     className: "toolbar-separator"
   }, "|")), activeCommands.length > 0 && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
@@ -337,8 +591,8 @@ function Editor({
     type: "button",
     className: `toolbar-btn${activeToolMap[item.cmd] ? " active" : ""}`,
     onMouseDown: event => event.preventDefault(),
-    onClick: () => exec(item.cmd),
-    title: item.label,
+    onClick: () => exec$1(item.cmd),
+    title: translate(item.label),
     "aria-pressed": activeToolMap[item.cmd] || false
   }, item.icon))), /*#__PURE__*/React.createElement("span", {
     className: "toolbar-separator"
@@ -346,29 +600,29 @@ function Editor({
     className: "toolbar-group"
   }, showHeading && /*#__PURE__*/React.createElement("label", {
     className: "toolbar-label"
-  }, "Format", /*#__PURE__*/React.createElement("select", {
+  }, translate("Format"), /*#__PURE__*/React.createElement("select", {
     value: heading,
-    onChange: event => applyHeading(event.target.value),
+    onChange: event => applyHeading$1(event.target.value),
     className: "toolbar-select"
   }, /*#__PURE__*/React.createElement("option", {
     value: "p"
-  }, "Paragraph"), /*#__PURE__*/React.createElement("option", {
+  }, translate("Paragraph")), /*#__PURE__*/React.createElement("option", {
     value: "h1"
-  }, "Heading 1"), /*#__PURE__*/React.createElement("option", {
+  }, translate("Heading 1")), /*#__PURE__*/React.createElement("option", {
     value: "h2"
-  }, "Heading 2"), /*#__PURE__*/React.createElement("option", {
+  }, translate("Heading 2")), /*#__PURE__*/React.createElement("option", {
     value: "h3"
-  }, "Heading 3"), /*#__PURE__*/React.createElement("option", {
+  }, translate("Heading 3")), /*#__PURE__*/React.createElement("option", {
     value: "h4"
-  }, "Heading 4"), /*#__PURE__*/React.createElement("option", {
+  }, translate("Heading 4")), /*#__PURE__*/React.createElement("option", {
     value: "blockquote"
-  }, "Blockquote"), codeBlock && /*#__PURE__*/React.createElement("option", {
+  }, translate("Blockquote")), codeBlock && /*#__PURE__*/React.createElement("option", {
     value: "pre"
-  }, "Code Block"))), showFontSize && /*#__PURE__*/React.createElement("label", {
+  }, translate("Code Block")))), showFontSize && /*#__PURE__*/React.createElement("label", {
     className: "toolbar-label"
-  }, "Size", /*#__PURE__*/React.createElement("select", {
+  }, translate("Size"), /*#__PURE__*/React.createElement("select", {
     value: fontSize,
-    onChange: event => applyFontSize(event.target.value),
+    onChange: event => applyFontSize$1(event.target.value),
     className: "toolbar-select"
   }, /*#__PURE__*/React.createElement("option", {
     value: "10"
@@ -396,40 +650,40 @@ function Editor({
     value: "48"
   }, "48px"), /*#__PURE__*/React.createElement("option", {
     value: "custom"
-  }, "Custom"))), showFontSize && fontSize === "custom" && /*#__PURE__*/React.createElement("label", {
+  }, translate("Custom")))), showFontSize && fontSize === "custom" && /*#__PURE__*/React.createElement("label", {
     className: "toolbar-label"
   }, /*#__PURE__*/React.createElement("input", {
     type: "number",
     min: "8",
     max: "200",
     value: customSize,
-    onChange: event => applyCustomFontSize(event.target.value),
-    placeholder: "Size",
+    onChange: event => applyCustomFontSize$1(event.target.value),
+    placeholder: translate("Size"),
     className: "toolbar-input",
     style: {
       width: "60px"
     }
   }), "px"), showColor && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("label", {
     className: "toolbar-label color-label"
-  }, "Font", /*#__PURE__*/React.createElement("input", {
+  }, translate("Font"), /*#__PURE__*/React.createElement("input", {
     type: "color",
     className: "toolbar-color",
     value: textColor,
-    onChange: event => applyTextColor(event.target.value),
-    "aria-label": "Text color"
+    onChange: event => applyTextColor$1(event.target.value),
+    "aria-label": translate("Text color")
   })), /*#__PURE__*/React.createElement("label", {
     className: "toolbar-label color-label"
-  }, "Background", /*#__PURE__*/React.createElement("input", {
+  }, translate("Background"), /*#__PURE__*/React.createElement("input", {
     type: "color",
     className: "toolbar-color",
     value: backgroundColor,
-    onChange: event => applyBackgroundColor(event.target.value),
-    "aria-label": "Background color"
+    onChange: event => applyBackgroundColor$1(event.target.value),
+    "aria-label": translate("Background color")
   })), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn toolbar-btn-small",
-    onClick: resetColors,
-    title: "Reset colors"
+    onClick: resetColors$1,
+    title: translate("Reset colors")
   }, "\u21BA")), codeBlock && /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
@@ -437,48 +691,73 @@ function Editor({
       setCodeTheme(theme);
       setIsCodeModalOpen(true);
     },
-    title: "Insert code block"
-  }, "Code Block"), showAlign && /*#__PURE__*/React.createElement("div", {
+    title: translate("Insert code block")
+  }, translate("Code Block")), showAlign && /*#__PURE__*/React.createElement("div", {
     className: "toolbar-label"
-  }, "Align", /*#__PURE__*/React.createElement("div", {
+  }, translate("Align"), /*#__PURE__*/React.createElement("div", {
     className: "align-buttons"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn toolbar-btn-small",
-    onClick: () => exec("justifyLeft"),
-    title: "Align Left"
+    onClick: () => exec$1("justifyLeft"),
+    title: translate("Align Left")
   }, "\u27F8"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn toolbar-btn-small",
-    onClick: () => exec("justifyCenter"),
-    title: "Align Center"
+    onClick: () => exec$1("justifyCenter"),
+    title: translate("Align Center")
   }, "\u21D4"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn toolbar-btn-small",
-    onClick: () => exec("justifyRight"),
-    title: "Align Right"
+    onClick: () => exec$1("justifyRight"),
+    title: translate("Align Right")
   }, "\u27F9"), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn toolbar-btn-small",
-    onClick: () => exec("justifyFull"),
-    title: "Justify"
+    onClick: () => exec$1("justifyFull"),
+    title: translate("Justify")
   }, "\u21FF")))), /*#__PURE__*/React.createElement("span", {
     className: "toolbar-separator"
-  }, "|")), (showLink || showClear) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+  }, "|")), (showLink || showTooltip || showAnchor || showHr || showMedia || showClear) && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
     className: "toolbar-group"
   }, showLink && /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
-    onClick: insertLink
-  }, "\uD83D\uDD17"), showClear && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    onClick: insertLink$1
+  }, "\uD83D\uDD17"), showTooltip && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "toolbar-btn",
+    onClick: insertTooltip$1,
+    title: translate("Add tooltip/note to selected text")
+  }, "\uD83D\uDCAC"), showAnchor && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "toolbar-btn",
+    onClick: insertAnchor$1,
+    title: translate("Insert anchor")
+  }, "\u2693"), showHr && /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "toolbar-btn",
+    onClick: insertHr$1,
+    title: translate("Insert horizontal line")
+  }, "\u2500"), showMedia && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "toolbar-btn",
+    onClick: insertImage$1,
+    title: translate("Insert picture")
+  }, "\uD83D\uDDBC\uFE0F"), /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "toolbar-btn",
+    onClick: insertVideo$1,
+    title: translate("Insert video")
+  }, "\uD83C\uDFAC")), showClear && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
     onClick: removeFormat
-  }, "Clear format"), /*#__PURE__*/React.createElement("button", {
+  }, translate("Clear format")), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn danger",
-    onClick: clearAll
-  }, "Clear all"))), /*#__PURE__*/React.createElement("span", {
+    onClick: clearAll$1
+  }, translate("Clear all")))), /*#__PURE__*/React.createElement("span", {
     className: "toolbar-separator"
   }, "|")), showPlainPaste && /*#__PURE__*/React.createElement("div", {
     className: "toolbar-group toggle"
@@ -488,14 +767,22 @@ function Editor({
     type: "checkbox",
     checked: plainPaste,
     onChange: event => setPlainPaste(event.target.checked)
-  }), "Paste as plain text"))), /*#__PURE__*/React.createElement("div", {
+  }), translate("Paste as plain text"))), showFullscreen && /*#__PURE__*/React.createElement("div", {
+    className: "toolbar-group"
+  }, /*#__PURE__*/React.createElement("button", {
+    type: "button",
+    className: "toolbar-btn",
+    onClick: toggleFullscreen,
+    title: isFullscreen ? translate("Exit fullscreen") : translate("Enter fullscreen")
+  }, isFullscreen ? "⤓" : "⤢"))), /*#__PURE__*/React.createElement("div", {
     className: "editor-area"
   }, /*#__PURE__*/React.createElement("div", {
     ref: editorRef,
     className: "editor-surface",
     contentEditable: true,
-    onInput: onInput,
-    onPaste: onPaste,
+    onInput: onInput$1,
+    onPaste: onPaste$1,
+    onClick: onEditorClick,
     onKeyUp: updateToolbarState,
     onMouseUp: updateToolbarState,
     suppressContentEditableWarning: true,
@@ -504,19 +791,19 @@ function Editor({
     className: "editor-footer"
   }, showStats && /*#__PURE__*/React.createElement("div", {
     className: "footer-stats"
-  }, /*#__PURE__*/React.createElement("span", null, stats.words, " words"), /*#__PURE__*/React.createElement("span", null, stats.chars, " characters"), /*#__PURE__*/React.createElement("span", null, selectionText ? `${selectionText.length} selected` : "No selection")), showCopyHtml && /*#__PURE__*/React.createElement("div", {
+  }, /*#__PURE__*/React.createElement("span", null, stats.words, " ", translate("words")), /*#__PURE__*/React.createElement("span", null, stats.chars, " ", translate("characters")), /*#__PURE__*/React.createElement("span", null, selectionText ? `${selectionText.length} ${translate("selected")}` : translate("No selection"))), showCopyHtml && /*#__PURE__*/React.createElement("div", {
     className: "footer-actions"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
-    onClick: exportHtml
-  }, "Copy HTML"))), showLiveHtml && /*#__PURE__*/React.createElement("aside", {
+    onClick: exportHtml$1
+  }, translate("Copy HTML")))), showLiveHtml && /*#__PURE__*/React.createElement("aside", {
     className: "editor-preview"
   }, /*#__PURE__*/React.createElement("pre", {
     className: "preview-code"
   }, html), /*#__PURE__*/React.createElement("div", {
     className: "preview-header"
-  }, "Live HTML")), codeBlock && isCodeModalOpen && /*#__PURE__*/React.createElement("div", {
+  }, translate("Live HTML"))), codeBlock && isCodeModalOpen && /*#__PURE__*/React.createElement("div", {
     className: "modal-backdrop",
     role: "dialog",
     "aria-modal": "true"
@@ -524,7 +811,7 @@ function Editor({
     className: "modal"
   }, /*#__PURE__*/React.createElement("div", {
     className: "modal-header"
-  }, "Insert Code Block"), /*#__PURE__*/React.createElement(CodeBlock, {
+  }, translate("Insert Code Block")), /*#__PURE__*/React.createElement(CodeBlock, {
     value: codeValue,
     language: codeLanguage,
     theme: codeTheme,
@@ -532,18 +819,18 @@ function Editor({
     onChange: setCodeValue,
     onLanguageChange: setCodeLanguage,
     onThemeChange: setCodeTheme,
-    placeholder: "Paste your code here"
+    placeholder: translate("Paste your code here")
   }), /*#__PURE__*/React.createElement("div", {
     className: "modal-actions"
   }, /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
     onClick: () => setIsCodeModalOpen(false)
-  }, "Cancel"), /*#__PURE__*/React.createElement("button", {
+  }, translate("Cancel")), /*#__PURE__*/React.createElement("button", {
     type: "button",
     className: "toolbar-btn",
-    onClick: insertCodeBlock
-  }, "Insert")))));
+    onClick: insertCodeBlock$1
+  }, translate("Insert"))))));
 }
 
 // src/index.js - Library entry point