@rufous/ui 0.2.57 → 0.2.58

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/dist/main.cjs CHANGED
@@ -8322,6 +8322,7 @@ PhoneField.displayName = "PhoneField";
8322
8322
 
8323
8323
  // lib/RufousTextEditor/RufousTextEditor.tsx
8324
8324
  var import_react58 = __toESM(require("react"), 1);
8325
+ var import_react_dom11 = require("react-dom");
8325
8326
  var import_react59 = require("@tiptap/react");
8326
8327
  var import_starter_kit = __toESM(require("@tiptap/starter-kit"), 1);
8327
8328
  var import_extension_placeholder = __toESM(require("@tiptap/extension-placeholder"), 1);
@@ -8753,6 +8754,7 @@ var SpeechToText_default = SpeechToText;
8753
8754
 
8754
8755
  // lib/RufousTextEditor/AICommands.tsx
8755
8756
  var import_react53 = __toESM(require("react"), 1);
8757
+ var import_react_dom7 = require("react-dom");
8756
8758
  var AI_COMMANDS = [
8757
8759
  { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
8758
8760
  { id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
@@ -8909,54 +8911,58 @@ var AICommands = ({ editor, onAICommand }) => {
8909
8911
  onClick: () => handleCommandSelect(cmd)
8910
8912
  },
8911
8913
  cmd.label
8912
- ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react53.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react53.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react53.default.createElement(
8913
- "textarea",
8914
- {
8915
- className: "ai-modal-prompt",
8916
- value: promptText,
8917
- onChange: (e) => setPromptText(e.target.value),
8918
- rows: 3
8919
- }
8920
- ), /* @__PURE__ */ import_react53.default.createElement(
8921
- "button",
8922
- {
8923
- className: "ai-modal-robot-btn",
8924
- onClick: () => fetchAIResult(promptText, originalText),
8925
- disabled: loading,
8926
- title: "Run with custom prompt"
8927
- },
8928
- /* @__PURE__ */ import_react53.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react53.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react53.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react53.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M8 7h8" }))
8929
- ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react53.default.createElement(
8930
- "button",
8931
- {
8932
- className: "ai-modal-action-btn ai-modal-insert-btn",
8933
- onClick: handleInsert,
8934
- disabled: loading || !resultText
8935
- },
8936
- "Insert"
8937
- ), /* @__PURE__ */ import_react53.default.createElement(
8938
- "button",
8939
- {
8940
- className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
8941
- onClick: handleInsertAfter,
8942
- disabled: loading || !resultText
8943
- },
8944
- "Insert After"
8945
- ), /* @__PURE__ */ import_react53.default.createElement(
8946
- "button",
8947
- {
8948
- className: "ai-modal-action-btn ai-modal-refresh-btn",
8949
- onClick: handleRefresh,
8950
- disabled: loading,
8951
- title: "Generate another response"
8952
- },
8953
- /* @__PURE__ */ import_react53.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react53.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
8954
- )), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react53.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))));
8914
+ ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && (0, import_react_dom7.createPortal)(
8915
+ /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ import_react53.default.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ import_react53.default.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ import_react53.default.createElement(
8916
+ "textarea",
8917
+ {
8918
+ className: "ai-modal-prompt",
8919
+ value: promptText,
8920
+ onChange: (e) => setPromptText(e.target.value),
8921
+ rows: 3
8922
+ }
8923
+ ), /* @__PURE__ */ import_react53.default.createElement(
8924
+ "button",
8925
+ {
8926
+ className: "ai-modal-robot-btn",
8927
+ onClick: () => fetchAIResult(promptText, originalText),
8928
+ disabled: loading,
8929
+ title: "Run with custom prompt"
8930
+ },
8931
+ /* @__PURE__ */ import_react53.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react53.default.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ import_react53.default.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ import_react53.default.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M8 7h8" }))
8932
+ ))), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ import_react53.default.createElement(
8933
+ "button",
8934
+ {
8935
+ className: "ai-modal-action-btn ai-modal-insert-btn",
8936
+ onClick: handleInsert,
8937
+ disabled: loading || !resultText
8938
+ },
8939
+ "Insert"
8940
+ ), /* @__PURE__ */ import_react53.default.createElement(
8941
+ "button",
8942
+ {
8943
+ className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
8944
+ onClick: handleInsertAfter,
8945
+ disabled: loading || !resultText
8946
+ },
8947
+ "Insert After"
8948
+ ), /* @__PURE__ */ import_react53.default.createElement(
8949
+ "button",
8950
+ {
8951
+ className: "ai-modal-action-btn ai-modal-refresh-btn",
8952
+ onClick: handleRefresh,
8953
+ disabled: loading,
8954
+ title: "Generate another response"
8955
+ },
8956
+ /* @__PURE__ */ import_react53.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ import_react53.default.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ import_react53.default.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
8957
+ )), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ import_react53.default.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ import_react53.default.createElement("span", null, "Generating response...")) : /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ import_react53.default.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ import_react53.default.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
8958
+ document.body
8959
+ ));
8955
8960
  };
8956
8961
  var AICommands_default = AICommands;
8957
8962
 
8958
8963
  // lib/RufousTextEditor/TranslateModal.tsx
8959
8964
  var import_react54 = __toESM(require("react"), 1);
8965
+ var import_react_dom8 = require("react-dom");
8960
8966
  var LANGUAGES = [
8961
8967
  { code: "af", name: "Afrikaans" },
8962
8968
  { code: "sq", name: "Albanian" },
@@ -9147,43 +9153,46 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
9147
9153
  setTranslating(false);
9148
9154
  }
9149
9155
  };
9150
- return /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react54.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react54.default.createElement(
9151
- "input",
9152
- {
9153
- type: "text",
9154
- placeholder: "Filter",
9155
- value: sourceFilter,
9156
- onChange: (e) => setSourceFilter(e.target.value),
9157
- className: "translate-filter-input"
9158
- }
9159
- )), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react54.default.createElement(
9160
- "button",
9161
- {
9162
- key: lang.code,
9163
- className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
9164
- onClick: () => setSourceLang(lang.code)
9165
- },
9166
- /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-code" }, lang.code),
9167
- /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-name" }, lang.name)
9168
- )))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap, title: "Swap languages" }, "\u21C4")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react54.default.createElement(
9169
- "input",
9170
- {
9171
- type: "text",
9172
- placeholder: "Filter",
9173
- value: targetFilter,
9174
- onChange: (e) => setTargetFilter(e.target.value),
9175
- className: "translate-filter-input"
9176
- }
9177
- )), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react54.default.createElement(
9178
- "button",
9179
- {
9180
- key: lang.code,
9181
- className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
9182
- onClick: () => setTargetLang(lang.code)
9183
- },
9184
- /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-code" }, lang.code),
9185
- /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-name" }, lang.name)
9186
- ))))), error && /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save"))));
9156
+ return (0, import_react_dom8.createPortal)(
9157
+ /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-header" }, /* @__PURE__ */ import_react54.default.createElement("h3", null, "Translate options"), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-body" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react54.default.createElement(
9158
+ "input",
9159
+ {
9160
+ type: "text",
9161
+ placeholder: "Filter",
9162
+ value: sourceFilter,
9163
+ onChange: (e) => setSourceFilter(e.target.value),
9164
+ className: "translate-filter-input"
9165
+ }
9166
+ )), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ import_react54.default.createElement(
9167
+ "button",
9168
+ {
9169
+ key: lang.code,
9170
+ className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
9171
+ onClick: () => setSourceLang(lang.code)
9172
+ },
9173
+ /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-code" }, lang.code),
9174
+ /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-name" }, lang.name)
9175
+ )))), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "translate-swap-btn", onClick: handleSwap, title: "Swap languages" }, "\u21C4")), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-col" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ import_react54.default.createElement(
9176
+ "input",
9177
+ {
9178
+ type: "text",
9179
+ placeholder: "Filter",
9180
+ value: targetFilter,
9181
+ onChange: (e) => setTargetFilter(e.target.value),
9182
+ className: "translate-filter-input"
9183
+ }
9184
+ )), /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ import_react54.default.createElement(
9185
+ "button",
9186
+ {
9187
+ key: lang.code,
9188
+ className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
9189
+ onClick: () => setTargetLang(lang.code)
9190
+ },
9191
+ /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-code" }, lang.code),
9192
+ /* @__PURE__ */ import_react54.default.createElement("span", { className: "translate-name" }, lang.name)
9193
+ ))))), error && /* @__PURE__ */ import_react54.default.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ import_react54.default.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ import_react54.default.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
9194
+ document.body
9195
+ );
9187
9196
  };
9188
9197
  var TranslateModal_default = TranslateModal;
9189
9198
 
@@ -10629,95 +10638,91 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
10629
10638
  lh
10630
10639
  );
10631
10640
  })
10632
- )), (show("ul") || show("ol")) && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react55.default.createElement(
10633
- Dropdown,
10641
+ )), (show("ul") || show("ol")) && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ import_react55.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
10642
+ "button",
10634
10643
  {
10635
- trigger: {
10636
- label: /* @__PURE__ */ import_react55.default.createElement(IconBulletList, null),
10637
- title: "Insert Unordered List",
10638
- className: editor.isActive("bulletList") ? "is-active" : ""
10644
+ className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
10645
+ onClick: () => editor.chain().focus().toggleBulletList().run(),
10646
+ title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List"
10647
+ },
10648
+ /* @__PURE__ */ import_react55.default.createElement(IconBulletList, null)
10649
+ ), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
10650
+ { label: "Default", style: null, icon: "\u2022" },
10651
+ { label: "Circle", style: "circle", icon: "\u25CB" },
10652
+ { label: "Dot", style: "disc", icon: "\u2219" },
10653
+ { label: "Square", style: "square", icon: "\u25A0" }
10654
+ ].map((item) => /* @__PURE__ */ import_react55.default.createElement(
10655
+ "button",
10656
+ {
10657
+ key: item.label,
10658
+ className: "dropdown-item bullet-style-item",
10659
+ onClick: () => {
10660
+ const chain = editor.chain().focus();
10661
+ if (!editor.isActive("bulletList")) {
10662
+ chain.toggleBulletList();
10663
+ }
10664
+ chain.command(({ tr }) => {
10665
+ const { $from } = tr.selection;
10666
+ for (let d = $from.depth; d > 0; d--) {
10667
+ if ($from.node(d).type.name === "bulletList") {
10668
+ tr.setNodeMarkup($from.before(d), void 0, {
10669
+ ...$from.node(d).attrs,
10670
+ listStyleType: item.style
10671
+ });
10672
+ return true;
10673
+ }
10674
+ }
10675
+ return true;
10676
+ }).run();
10639
10677
  }
10640
10678
  },
10641
- [
10642
- { label: "Default", style: null, icon: "\u2022" },
10643
- { label: "Circle", style: "circle", icon: "\u25CB" },
10644
- { label: "Dot", style: "disc", icon: "\u2219" },
10645
- { label: "Square", style: "square", icon: "\u25A0" }
10646
- ].map((item) => /* @__PURE__ */ import_react55.default.createElement(
10647
- "button",
10648
- {
10649
- key: item.label,
10650
- className: "dropdown-item bullet-style-item",
10651
- onClick: () => {
10652
- const chain = editor.chain().focus();
10653
- if (!editor.isActive("bulletList")) {
10654
- chain.toggleBulletList();
10655
- }
10656
- chain.command(({ tr }) => {
10657
- const { $from } = tr.selection;
10658
- for (let d = $from.depth; d > 0; d--) {
10659
- if ($from.node(d).type.name === "bulletList") {
10660
- tr.setNodeMarkup($from.before(d), void 0, {
10661
- ...$from.node(d).attrs,
10662
- listStyleType: item.style
10663
- });
10664
- return true;
10665
- }
10666
- }
10667
- return true;
10668
- }).run();
10669
- }
10670
- },
10671
- /* @__PURE__ */ import_react55.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
10672
- " ",
10673
- item.label
10674
- ))
10675
- ), show("ol") && /* @__PURE__ */ import_react55.default.createElement(
10676
- Dropdown,
10679
+ /* @__PURE__ */ import_react55.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
10680
+ " ",
10681
+ item.label
10682
+ )))), show("ol") && /* @__PURE__ */ import_react55.default.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ import_react55.default.createElement(
10683
+ "button",
10677
10684
  {
10678
- trigger: {
10679
- label: /* @__PURE__ */ import_react55.default.createElement(IconOrderedList, null),
10680
- title: "Insert Ordered List",
10681
- className: editor.isActive("orderedList") ? "is-active" : ""
10685
+ className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
10686
+ onClick: () => editor.chain().focus().toggleOrderedList().run(),
10687
+ title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List"
10688
+ },
10689
+ /* @__PURE__ */ import_react55.default.createElement(IconOrderedList, null)
10690
+ ), /* @__PURE__ */ import_react55.default.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
10691
+ { label: "Default", style: "decimal", icon: "1." },
10692
+ { label: "Lower Alpha", style: "lower-alpha", icon: "a." },
10693
+ { label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
10694
+ { label: "Lower Roman", style: "lower-roman", icon: "i." },
10695
+ { label: "Upper Alpha", style: "upper-alpha", icon: "A." },
10696
+ { label: "Upper Roman", style: "upper-roman", icon: "I." }
10697
+ ].map((item) => /* @__PURE__ */ import_react55.default.createElement(
10698
+ "button",
10699
+ {
10700
+ key: item.label,
10701
+ className: "dropdown-item bullet-style-item",
10702
+ onClick: () => {
10703
+ const chain = editor.chain().focus();
10704
+ if (!editor.isActive("orderedList")) {
10705
+ chain.toggleOrderedList();
10706
+ }
10707
+ chain.command(({ tr }) => {
10708
+ const { $from } = tr.selection;
10709
+ for (let d = $from.depth; d > 0; d--) {
10710
+ if ($from.node(d).type.name === "orderedList") {
10711
+ tr.setNodeMarkup($from.before(d), void 0, {
10712
+ ...$from.node(d).attrs,
10713
+ listStyleType: item.style === "decimal" ? null : item.style
10714
+ });
10715
+ return true;
10716
+ }
10717
+ }
10718
+ return true;
10719
+ }).run();
10682
10720
  }
10683
10721
  },
10684
- [
10685
- { label: "Default", style: "decimal", icon: "1." },
10686
- { label: "Lower Alpha", style: "lower-alpha", icon: "a." },
10687
- { label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
10688
- { label: "Lower Roman", style: "lower-roman", icon: "i." },
10689
- { label: "Upper Alpha", style: "upper-alpha", icon: "A." },
10690
- { label: "Upper Roman", style: "upper-roman", icon: "I." }
10691
- ].map((item) => /* @__PURE__ */ import_react55.default.createElement(
10692
- "button",
10693
- {
10694
- key: item.label,
10695
- className: "dropdown-item bullet-style-item",
10696
- onClick: () => {
10697
- const chain = editor.chain().focus();
10698
- if (!editor.isActive("orderedList")) {
10699
- chain.toggleOrderedList();
10700
- }
10701
- chain.command(({ tr }) => {
10702
- const { $from } = tr.selection;
10703
- for (let d = $from.depth; d > 0; d--) {
10704
- if ($from.node(d).type.name === "orderedList") {
10705
- tr.setNodeMarkup($from.before(d), void 0, {
10706
- ...$from.node(d).attrs,
10707
- listStyleType: item.style === "decimal" ? null : item.style
10708
- });
10709
- return true;
10710
- }
10711
- }
10712
- return true;
10713
- }).run();
10714
- }
10715
- },
10716
- /* @__PURE__ */ import_react55.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
10717
- " ",
10718
- item.label
10719
- ))
10720
- )), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react55.default.createElement(
10722
+ /* @__PURE__ */ import_react55.default.createElement("span", { className: "bullet-style-icon" }, item.icon),
10723
+ " ",
10724
+ item.label
10725
+ ))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ import_react55.default.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ import_react55.default.createElement(
10721
10726
  Dropdown,
10722
10727
  {
10723
10728
  trigger: {
@@ -10965,7 +10970,7 @@ var Toolbar_default = Toolbar;
10965
10970
 
10966
10971
  // lib/RufousTextEditor/ImageToolbar.tsx
10967
10972
  var import_react56 = __toESM(require("react"), 1);
10968
- var import_react_dom7 = require("react-dom");
10973
+ var import_react_dom9 = require("react-dom");
10969
10974
  var ALIGNMENTS = [
10970
10975
  { value: "left", label: "Left", icon: "\u2630" },
10971
10976
  { value: "center", label: "Center", icon: "\u2261" },
@@ -11137,7 +11142,7 @@ var ImageToolbar = ({ editor }) => {
11137
11142
  }, [editor]);
11138
11143
  const node = editor?.state.selection.node;
11139
11144
  const isImage = node && node.type.name === "image";
11140
- if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom7.createPortal)(
11145
+ if (!editor || !isImage || !pos) return showModal ? (0, import_react_dom9.createPortal)(
11141
11146
  /* @__PURE__ */ import_react56.default.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
11142
11147
  document.body
11143
11148
  ) : null;
@@ -11214,7 +11219,7 @@ var ImageToolbar = ({ editor }) => {
11214
11219
  );
11215
11220
  setShowVAlign(false);
11216
11221
  };
11217
- return (0, import_react_dom7.createPortal)(
11222
+ return (0, import_react_dom9.createPortal)(
11218
11223
  /* @__PURE__ */ import_react56.default.createElement(import_react56.default.Fragment, null, /* @__PURE__ */ import_react56.default.createElement(
11219
11224
  "div",
11220
11225
  {
@@ -11245,7 +11250,7 @@ var ImageToolbar_default = ImageToolbar;
11245
11250
 
11246
11251
  // lib/RufousTextEditor/VideoToolbar.tsx
11247
11252
  var import_react57 = __toESM(require("react"), 1);
11248
- var import_react_dom8 = require("react-dom");
11253
+ var import_react_dom10 = require("react-dom");
11249
11254
  var ALIGNMENTS2 = [
11250
11255
  { value: "left", label: "Left", icon: "\u2630" },
11251
11256
  { value: "center", label: "Center", icon: "\u2261" },
@@ -11391,7 +11396,7 @@ var VideoToolbar = ({ editor }) => {
11391
11396
  const node = editor?.state.selection.node;
11392
11397
  const isVideo = node && VIDEO_TYPES.includes(node.type.name);
11393
11398
  const nodeType = node?.type.name;
11394
- if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom8.createPortal)(
11399
+ if (!editor || !isVideo || !pos) return showModal ? (0, import_react_dom10.createPortal)(
11395
11400
  /* @__PURE__ */ import_react57.default.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
11396
11401
  document.body
11397
11402
  ) : null;
@@ -11438,7 +11443,7 @@ var VideoToolbar = ({ editor }) => {
11438
11443
  })
11439
11444
  );
11440
11445
  };
11441
- return (0, import_react_dom8.createPortal)(
11446
+ return (0, import_react_dom10.createPortal)(
11442
11447
  /* @__PURE__ */ import_react57.default.createElement(import_react57.default.Fragment, null, /* @__PURE__ */ import_react57.default.createElement(
11443
11448
  "div",
11444
11449
  {
@@ -11726,8 +11731,8 @@ var RufousTextEditor = ({
11726
11731
  setLinkUrl(previousUrl);
11727
11732
  setLinkText(selectedText || previousUrl);
11728
11733
  setLinkClassName(attrs.class && attrs.class !== "editor-link" ? attrs.class : "");
11729
- setLinkNewTab(attrs.target === "_blank" || !previousUrl);
11730
- setLinkNoFollow(attrs.rel ? attrs.rel.includes("nofollow") : true);
11734
+ setLinkNewTab(previousUrl ? attrs.target === "_blank" : true);
11735
+ setLinkNoFollow(previousUrl ? attrs.rel ? attrs.rel.includes("nofollow") : false : true);
11731
11736
  setLinkSelection({ from, to });
11732
11737
  setLinkModalOpen(true);
11733
11738
  }, [editor]);
@@ -11967,46 +11972,49 @@ var RufousTextEditor = ({
11967
11972
  },
11968
11973
  "\u201C Quote"
11969
11974
  )
11970
- ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
11971
- "input",
11972
- {
11973
- type: "url",
11974
- className: "link-modal-input",
11975
- value: linkUrl,
11976
- onChange: (e) => setLinkUrl(e.target.value),
11977
- onKeyDown: (e) => {
11978
- if (e.key === "Enter") handleLinkSubmit();
11979
- },
11980
- placeholder: "https://example.com",
11981
- autoFocus: true
11982
- }
11983
- )), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react58.default.createElement(
11984
- "input",
11985
- {
11986
- type: "text",
11987
- className: "link-modal-input",
11988
- value: linkText,
11989
- onChange: (e) => setLinkText(e.target.value),
11990
- onKeyDown: (e) => {
11991
- if (e.key === "Enter") handleLinkSubmit();
11992
- },
11993
- placeholder: "Link text"
11994
- }
11995
- )), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
11996
- "input",
11997
- {
11998
- type: "checkbox",
11999
- checked: linkNewTab,
12000
- onChange: (e) => setLinkNewTab(e.target.checked)
12001
- }
12002
- ), "Open in new tab"), /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
12003
- "input",
12004
- {
12005
- type: "checkbox",
12006
- checked: linkNoFollow,
12007
- onChange: (e) => setLinkNoFollow(e.target.checked)
12008
- }
12009
- ), "No follow"))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))))
11975
+ ), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ import_react58.default.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ import_react58.default.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ import_react58.default.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ import_react58.default.createElement(import_react58.default.Fragment, null, /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ import_react58.default.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && (0, import_react_dom11.createPortal)(
11976
+ /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ import_react58.default.createElement(
11977
+ "input",
11978
+ {
11979
+ type: "url",
11980
+ className: "link-modal-input",
11981
+ value: linkUrl,
11982
+ onChange: (e) => setLinkUrl(e.target.value),
11983
+ onKeyDown: (e) => {
11984
+ if (e.key === "Enter") handleLinkSubmit();
11985
+ },
11986
+ placeholder: "https://example.com",
11987
+ autoFocus: true
11988
+ }
11989
+ )), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ import_react58.default.createElement(
11990
+ "input",
11991
+ {
11992
+ type: "text",
11993
+ className: "link-modal-input",
11994
+ value: linkText,
11995
+ onChange: (e) => setLinkText(e.target.value),
11996
+ onKeyDown: (e) => {
11997
+ if (e.key === "Enter") handleLinkSubmit();
11998
+ },
11999
+ placeholder: "Link text"
12000
+ }
12001
+ )), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
12002
+ "input",
12003
+ {
12004
+ type: "checkbox",
12005
+ checked: linkNewTab,
12006
+ onChange: (e) => setLinkNewTab(e.target.checked)
12007
+ }
12008
+ ), "Open in new tab"), /* @__PURE__ */ import_react58.default.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ import_react58.default.createElement(
12009
+ "input",
12010
+ {
12011
+ type: "checkbox",
12012
+ checked: linkNoFollow,
12013
+ onChange: (e) => setLinkNoFollow(e.target.checked)
12014
+ }
12015
+ ), "No follow"))), /* @__PURE__ */ import_react58.default.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ import_react58.default.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
12016
+ document.body
12017
+ ))
12010
12018
  );
12011
12019
  };
12012
12020
  var RufousTextContent = ({ content, className, style, sx }) => {
package/dist/main.css CHANGED
@@ -8133,6 +8133,33 @@ pre {
8133
8133
  .rf-rte-wrapper .translate-split-btn .translate-arrow-btn:hover {
8134
8134
  background: #e8eaed;
8135
8135
  }
8136
+ .rf-rte-wrapper .list-split-btn {
8137
+ display: inline-flex;
8138
+ align-items: center;
8139
+ position: relative;
8140
+ border-radius: 4px;
8141
+ border: 1px solid transparent;
8142
+ }
8143
+ .rf-rte-wrapper .list-split-btn:hover {
8144
+ border-color: #dadce0;
8145
+ }
8146
+ .rf-rte-wrapper .list-split-btn > .toolbar-btn {
8147
+ border-radius: 4px 0 0 4px;
8148
+ }
8149
+ .rf-rte-wrapper .list-split-btn > .toolbar-btn:hover {
8150
+ background: #f5d5d5;
8151
+ }
8152
+ .rf-rte-wrapper .list-split-btn .dropdown {
8153
+ margin-left: -1px;
8154
+ }
8155
+ .rf-rte-wrapper .list-split-btn .list-arrow-btn {
8156
+ border-radius: 0 4px 4px 0;
8157
+ min-width: 18px;
8158
+ padding: 4px 2px;
8159
+ }
8160
+ .rf-rte-wrapper .list-split-btn .list-arrow-btn:hover {
8161
+ background: #e8eaed;
8162
+ }
8136
8163
  .rf-rte-wrapper .todo-split-btn {
8137
8164
  display: inline-flex;
8138
8165
  align-items: center;
package/dist/main.js CHANGED
@@ -8257,6 +8257,7 @@ PhoneField.displayName = "PhoneField";
8257
8257
 
8258
8258
  // lib/RufousTextEditor/RufousTextEditor.tsx
8259
8259
  import React115, { useMemo as useMemo4, useCallback as useCallback13, useState as useState33, useRef as useRef29, useEffect as useEffect26 } from "react";
8260
+ import { createPortal as createPortal5 } from "react-dom";
8260
8261
  import { useEditor, EditorContent, EditorContext, FloatingMenu, BubbleMenu } from "@tiptap/react";
8261
8262
  import StarterKit from "@tiptap/starter-kit";
8262
8263
  import Placeholder from "@tiptap/extension-placeholder";
@@ -8688,6 +8689,7 @@ var SpeechToText_default = SpeechToText;
8688
8689
 
8689
8690
  // lib/RufousTextEditor/AICommands.tsx
8690
8691
  import React109, { useState as useState28, useRef as useRef25, useEffect as useEffect22, useCallback as useCallback11 } from "react";
8692
+ import { createPortal } from "react-dom";
8691
8693
  var AI_COMMANDS = [
8692
8694
  { id: "improve", label: "Improve writing", prompt: "Improve the following text to make it clearer, more engaging, and well-structured. Return only the improved text, no explanations." },
8693
8695
  { id: "shorter", label: "Make shorter", prompt: "Make the following text shorter and more concise while keeping the key points. Return only the shortened text, no explanations." },
@@ -8844,54 +8846,58 @@ var AICommands = ({ editor, onAICommand }) => {
8844
8846
  onClick: () => handleCommandSelect(cmd)
8845
8847
  },
8846
8848
  cmd.label
8847
- ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React109.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React109.createElement(
8848
- "textarea",
8849
- {
8850
- className: "ai-modal-prompt",
8851
- value: promptText,
8852
- onChange: (e) => setPromptText(e.target.value),
8853
- rows: 3
8854
- }
8855
- ), /* @__PURE__ */ React109.createElement(
8856
- "button",
8857
- {
8858
- className: "ai-modal-robot-btn",
8859
- onClick: () => fetchAIResult(promptText, originalText),
8860
- disabled: loading,
8861
- title: "Run with custom prompt"
8862
- },
8863
- /* @__PURE__ */ React109.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React109.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React109.createElement("path", { d: "M8 7h8" }))
8864
- ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React109.createElement(
8865
- "button",
8866
- {
8867
- className: "ai-modal-action-btn ai-modal-insert-btn",
8868
- onClick: handleInsert,
8869
- disabled: loading || !resultText
8870
- },
8871
- "Insert"
8872
- ), /* @__PURE__ */ React109.createElement(
8873
- "button",
8874
- {
8875
- className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
8876
- onClick: handleInsertAfter,
8877
- disabled: loading || !resultText
8878
- },
8879
- "Insert After"
8880
- ), /* @__PURE__ */ React109.createElement(
8881
- "button",
8882
- {
8883
- className: "ai-modal-action-btn ai-modal-refresh-btn",
8884
- onClick: handleRefresh,
8885
- disabled: loading,
8886
- title: "Generate another response"
8887
- },
8888
- /* @__PURE__ */ React109.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React109.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
8889
- )), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React109.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))));
8849
+ ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-commands-hint" }, editor.state.selection.empty ? "Will apply to all text" : "Will apply to selected text"))), showModal && createPortal(
8850
+ /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-overlay", onMouseDown: handleCancel }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal", onMouseDown: (e) => e.stopPropagation() }, /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-header" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-modal-title" }, "AI Assistant"), /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-close", onClick: handleCancel }, "\xD7")), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-section" }, /* @__PURE__ */ React109.createElement("label", { className: "ai-modal-label" }, "Prompt"), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-prompt-row" }, /* @__PURE__ */ React109.createElement(
8851
+ "textarea",
8852
+ {
8853
+ className: "ai-modal-prompt",
8854
+ value: promptText,
8855
+ onChange: (e) => setPromptText(e.target.value),
8856
+ rows: 3
8857
+ }
8858
+ ), /* @__PURE__ */ React109.createElement(
8859
+ "button",
8860
+ {
8861
+ className: "ai-modal-robot-btn",
8862
+ onClick: () => fetchAIResult(promptText, originalText),
8863
+ disabled: loading,
8864
+ title: "Run with custom prompt"
8865
+ },
8866
+ /* @__PURE__ */ React109.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("rect", { x: "3", y: "11", width: "18", height: "10", rx: "2" }), /* @__PURE__ */ React109.createElement("circle", { cx: "9", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("circle", { cx: "15", cy: "16", r: "1" }), /* @__PURE__ */ React109.createElement("path", { d: "M12 2v4" }), /* @__PURE__ */ React109.createElement("path", { d: "M8 7h8" }))
8867
+ ))), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-actions" }, /* @__PURE__ */ React109.createElement(
8868
+ "button",
8869
+ {
8870
+ className: "ai-modal-action-btn ai-modal-insert-btn",
8871
+ onClick: handleInsert,
8872
+ disabled: loading || !resultText
8873
+ },
8874
+ "Insert"
8875
+ ), /* @__PURE__ */ React109.createElement(
8876
+ "button",
8877
+ {
8878
+ className: "ai-modal-action-btn ai-modal-insert-after-btn ms-2",
8879
+ onClick: handleInsertAfter,
8880
+ disabled: loading || !resultText
8881
+ },
8882
+ "Insert After"
8883
+ ), /* @__PURE__ */ React109.createElement(
8884
+ "button",
8885
+ {
8886
+ className: "ai-modal-action-btn ai-modal-refresh-btn",
8887
+ onClick: handleRefresh,
8888
+ disabled: loading,
8889
+ title: "Generate another response"
8890
+ },
8891
+ /* @__PURE__ */ React109.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round" }, /* @__PURE__ */ React109.createElement("path", { d: "M21 2v6h-6" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 12a9 9 0 0 1 15-6.7L21 8" }), /* @__PURE__ */ React109.createElement("path", { d: "M3 22v-6h6" }), /* @__PURE__ */ React109.createElement("path", { d: "M21 12a9 9 0 0 1-15 6.7L3 16" }))
8892
+ )), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result-section" }, loading ? /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-loading" }, /* @__PURE__ */ React109.createElement("span", { className: "ai-spinner" }), /* @__PURE__ */ React109.createElement("span", null, "Generating response...")) : /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-result" }, resultText)), /* @__PURE__ */ React109.createElement("div", { className: "ai-modal-footer" }, /* @__PURE__ */ React109.createElement("button", { className: "ai-modal-cancel-btn", onClick: handleCancel }, "CANCEL")))),
8893
+ document.body
8894
+ ));
8890
8895
  };
8891
8896
  var AICommands_default = AICommands;
8892
8897
 
8893
8898
  // lib/RufousTextEditor/TranslateModal.tsx
8894
8899
  import React110, { useState as useState29, useMemo as useMemo3 } from "react";
8900
+ import { createPortal as createPortal2 } from "react-dom";
8895
8901
  var LANGUAGES = [
8896
8902
  { code: "af", name: "Afrikaans" },
8897
8903
  { code: "sq", name: "Albanian" },
@@ -9082,43 +9088,46 @@ var TranslateModal = ({ editor, onClose, onTranslate, initialSource, initialTarg
9082
9088
  setTranslating(false);
9083
9089
  }
9084
9090
  };
9085
- return /* @__PURE__ */ React110.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React110.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React110.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React110.createElement("h3", null, "Translate options"), /* @__PURE__ */ React110.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React110.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
9086
- "input",
9087
- {
9088
- type: "text",
9089
- placeholder: "Filter",
9090
- value: sourceFilter,
9091
- onChange: (e) => setSourceFilter(e.target.value),
9092
- className: "translate-filter-input"
9093
- }
9094
- )), /* @__PURE__ */ React110.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ React110.createElement(
9095
- "button",
9096
- {
9097
- key: lang.code,
9098
- className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
9099
- onClick: () => setSourceLang(lang.code)
9100
- },
9101
- /* @__PURE__ */ React110.createElement("span", { className: "translate-code" }, lang.code),
9102
- /* @__PURE__ */ React110.createElement("span", { className: "translate-name" }, lang.name)
9103
- )))), /* @__PURE__ */ React110.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React110.createElement("button", { className: "translate-swap-btn", onClick: handleSwap, title: "Swap languages" }, "\u21C4")), /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
9104
- "input",
9105
- {
9106
- type: "text",
9107
- placeholder: "Filter",
9108
- value: targetFilter,
9109
- onChange: (e) => setTargetFilter(e.target.value),
9110
- className: "translate-filter-input"
9111
- }
9112
- )), /* @__PURE__ */ React110.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ React110.createElement(
9113
- "button",
9114
- {
9115
- key: lang.code,
9116
- className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
9117
- onClick: () => setTargetLang(lang.code)
9118
- },
9119
- /* @__PURE__ */ React110.createElement("span", { className: "translate-code" }, lang.code),
9120
- /* @__PURE__ */ React110.createElement("span", { className: "translate-name" }, lang.name)
9121
- ))))), error && /* @__PURE__ */ React110.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ React110.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React110.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React110.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ React110.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save"))));
9091
+ return createPortal2(
9092
+ /* @__PURE__ */ React110.createElement("div", { className: "modal-overlay", onClick: onClose }, /* @__PURE__ */ React110.createElement("div", { className: "modal-content translate-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React110.createElement("div", { className: "modal-header" }, /* @__PURE__ */ React110.createElement("h3", null, "Translate options"), /* @__PURE__ */ React110.createElement("button", { className: "modal-close", onClick: onClose }, "\xD7")), /* @__PURE__ */ React110.createElement("div", { className: "modal-body" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-columns" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
9093
+ "input",
9094
+ {
9095
+ type: "text",
9096
+ placeholder: "Filter",
9097
+ value: sourceFilter,
9098
+ onChange: (e) => setSourceFilter(e.target.value),
9099
+ className: "translate-filter-input"
9100
+ }
9101
+ )), /* @__PURE__ */ React110.createElement("div", { className: "translate-list" }, filteredSource.map((lang) => /* @__PURE__ */ React110.createElement(
9102
+ "button",
9103
+ {
9104
+ key: lang.code,
9105
+ className: `translate-item ${sourceLang === lang.code ? "active" : ""}`,
9106
+ onClick: () => setSourceLang(lang.code)
9107
+ },
9108
+ /* @__PURE__ */ React110.createElement("span", { className: "translate-code" }, lang.code),
9109
+ /* @__PURE__ */ React110.createElement("span", { className: "translate-name" }, lang.name)
9110
+ )))), /* @__PURE__ */ React110.createElement("div", { className: "translate-swap" }, /* @__PURE__ */ React110.createElement("button", { className: "translate-swap-btn", onClick: handleSwap, title: "Swap languages" }, "\u21C4")), /* @__PURE__ */ React110.createElement("div", { className: "translate-col" }, /* @__PURE__ */ React110.createElement("div", { className: "translate-filter" }, /* @__PURE__ */ React110.createElement(
9111
+ "input",
9112
+ {
9113
+ type: "text",
9114
+ placeholder: "Filter",
9115
+ value: targetFilter,
9116
+ onChange: (e) => setTargetFilter(e.target.value),
9117
+ className: "translate-filter-input"
9118
+ }
9119
+ )), /* @__PURE__ */ React110.createElement("div", { className: "translate-list" }, filteredTarget.map((lang) => /* @__PURE__ */ React110.createElement(
9120
+ "button",
9121
+ {
9122
+ key: lang.code,
9123
+ className: `translate-item ${targetLang === lang.code ? "active" : ""}`,
9124
+ onClick: () => setTargetLang(lang.code)
9125
+ },
9126
+ /* @__PURE__ */ React110.createElement("span", { className: "translate-code" }, lang.code),
9127
+ /* @__PURE__ */ React110.createElement("span", { className: "translate-name" }, lang.name)
9128
+ ))))), error && /* @__PURE__ */ React110.createElement("div", { className: "translate-error" }, error)), /* @__PURE__ */ React110.createElement("div", { className: "modal-footer" }, /* @__PURE__ */ React110.createElement("div", { className: "modal-footer-left" }, /* @__PURE__ */ React110.createElement("button", { className: "modal-btn-cancel", onClick: onClose }, "Cancel")), /* @__PURE__ */ React110.createElement("button", { className: "modal-btn-apply", onClick: handleSave, disabled: translating }, translating ? "Translating..." : "Save")))),
9129
+ document.body
9130
+ );
9122
9131
  };
9123
9132
  var TranslateModal_default = TranslateModal;
9124
9133
 
@@ -10564,95 +10573,91 @@ var Toolbar = ({ editor, setLink, onAICommand, onTranslate, onSpeechToText, onTe
10564
10573
  lh
10565
10574
  );
10566
10575
  })
10567
- )), (show("ul") || show("ol")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React112.createElement(
10568
- Dropdown,
10576
+ )), (show("ul") || show("ol")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("ul") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(
10577
+ "button",
10569
10578
  {
10570
- trigger: {
10571
- label: /* @__PURE__ */ React112.createElement(IconBulletList, null),
10572
- title: "Insert Unordered List",
10573
- className: editor.isActive("bulletList") ? "is-active" : ""
10579
+ className: `toolbar-btn ${editor.isActive("bulletList") ? "is-active" : ""}`,
10580
+ onClick: () => editor.chain().focus().toggleBulletList().run(),
10581
+ title: editor.isActive("bulletList") ? "Disable Bullet List" : "Enable Bullet List"
10582
+ },
10583
+ /* @__PURE__ */ React112.createElement(IconBulletList, null)
10584
+ ), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
10585
+ { label: "Default", style: null, icon: "\u2022" },
10586
+ { label: "Circle", style: "circle", icon: "\u25CB" },
10587
+ { label: "Dot", style: "disc", icon: "\u2219" },
10588
+ { label: "Square", style: "square", icon: "\u25A0" }
10589
+ ].map((item) => /* @__PURE__ */ React112.createElement(
10590
+ "button",
10591
+ {
10592
+ key: item.label,
10593
+ className: "dropdown-item bullet-style-item",
10594
+ onClick: () => {
10595
+ const chain = editor.chain().focus();
10596
+ if (!editor.isActive("bulletList")) {
10597
+ chain.toggleBulletList();
10598
+ }
10599
+ chain.command(({ tr }) => {
10600
+ const { $from } = tr.selection;
10601
+ for (let d = $from.depth; d > 0; d--) {
10602
+ if ($from.node(d).type.name === "bulletList") {
10603
+ tr.setNodeMarkup($from.before(d), void 0, {
10604
+ ...$from.node(d).attrs,
10605
+ listStyleType: item.style
10606
+ });
10607
+ return true;
10608
+ }
10609
+ }
10610
+ return true;
10611
+ }).run();
10574
10612
  }
10575
10613
  },
10576
- [
10577
- { label: "Default", style: null, icon: "\u2022" },
10578
- { label: "Circle", style: "circle", icon: "\u25CB" },
10579
- { label: "Dot", style: "disc", icon: "\u2219" },
10580
- { label: "Square", style: "square", icon: "\u25A0" }
10581
- ].map((item) => /* @__PURE__ */ React112.createElement(
10582
- "button",
10583
- {
10584
- key: item.label,
10585
- className: "dropdown-item bullet-style-item",
10586
- onClick: () => {
10587
- const chain = editor.chain().focus();
10588
- if (!editor.isActive("bulletList")) {
10589
- chain.toggleBulletList();
10590
- }
10591
- chain.command(({ tr }) => {
10592
- const { $from } = tr.selection;
10593
- for (let d = $from.depth; d > 0; d--) {
10594
- if ($from.node(d).type.name === "bulletList") {
10595
- tr.setNodeMarkup($from.before(d), void 0, {
10596
- ...$from.node(d).attrs,
10597
- listStyleType: item.style
10598
- });
10599
- return true;
10600
- }
10601
- }
10602
- return true;
10603
- }).run();
10604
- }
10605
- },
10606
- /* @__PURE__ */ React112.createElement("span", { className: "bullet-style-icon" }, item.icon),
10607
- " ",
10608
- item.label
10609
- ))
10610
- ), show("ol") && /* @__PURE__ */ React112.createElement(
10611
- Dropdown,
10614
+ /* @__PURE__ */ React112.createElement("span", { className: "bullet-style-icon" }, item.icon),
10615
+ " ",
10616
+ item.label
10617
+ )))), show("ol") && /* @__PURE__ */ React112.createElement("div", { className: "list-split-btn" }, /* @__PURE__ */ React112.createElement(
10618
+ "button",
10612
10619
  {
10613
- trigger: {
10614
- label: /* @__PURE__ */ React112.createElement(IconOrderedList, null),
10615
- title: "Insert Ordered List",
10616
- className: editor.isActive("orderedList") ? "is-active" : ""
10620
+ className: `toolbar-btn ${editor.isActive("orderedList") ? "is-active" : ""}`,
10621
+ onClick: () => editor.chain().focus().toggleOrderedList().run(),
10622
+ title: editor.isActive("orderedList") ? "Disable Ordered List" : "Enable Ordered List"
10623
+ },
10624
+ /* @__PURE__ */ React112.createElement(IconOrderedList, null)
10625
+ ), /* @__PURE__ */ React112.createElement(Dropdown, { trigger: { label: "", title: "List style", className: "list-arrow-btn" }, keepOpen: true }, [
10626
+ { label: "Default", style: "decimal", icon: "1." },
10627
+ { label: "Lower Alpha", style: "lower-alpha", icon: "a." },
10628
+ { label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
10629
+ { label: "Lower Roman", style: "lower-roman", icon: "i." },
10630
+ { label: "Upper Alpha", style: "upper-alpha", icon: "A." },
10631
+ { label: "Upper Roman", style: "upper-roman", icon: "I." }
10632
+ ].map((item) => /* @__PURE__ */ React112.createElement(
10633
+ "button",
10634
+ {
10635
+ key: item.label,
10636
+ className: "dropdown-item bullet-style-item",
10637
+ onClick: () => {
10638
+ const chain = editor.chain().focus();
10639
+ if (!editor.isActive("orderedList")) {
10640
+ chain.toggleOrderedList();
10641
+ }
10642
+ chain.command(({ tr }) => {
10643
+ const { $from } = tr.selection;
10644
+ for (let d = $from.depth; d > 0; d--) {
10645
+ if ($from.node(d).type.name === "orderedList") {
10646
+ tr.setNodeMarkup($from.before(d), void 0, {
10647
+ ...$from.node(d).attrs,
10648
+ listStyleType: item.style === "decimal" ? null : item.style
10649
+ });
10650
+ return true;
10651
+ }
10652
+ }
10653
+ return true;
10654
+ }).run();
10617
10655
  }
10618
10656
  },
10619
- [
10620
- { label: "Default", style: "decimal", icon: "1." },
10621
- { label: "Lower Alpha", style: "lower-alpha", icon: "a." },
10622
- { label: "Lower Greek", style: "lower-greek", icon: "\u03B1." },
10623
- { label: "Lower Roman", style: "lower-roman", icon: "i." },
10624
- { label: "Upper Alpha", style: "upper-alpha", icon: "A." },
10625
- { label: "Upper Roman", style: "upper-roman", icon: "I." }
10626
- ].map((item) => /* @__PURE__ */ React112.createElement(
10627
- "button",
10628
- {
10629
- key: item.label,
10630
- className: "dropdown-item bullet-style-item",
10631
- onClick: () => {
10632
- const chain = editor.chain().focus();
10633
- if (!editor.isActive("orderedList")) {
10634
- chain.toggleOrderedList();
10635
- }
10636
- chain.command(({ tr }) => {
10637
- const { $from } = tr.selection;
10638
- for (let d = $from.depth; d > 0; d--) {
10639
- if ($from.node(d).type.name === "orderedList") {
10640
- tr.setNodeMarkup($from.before(d), void 0, {
10641
- ...$from.node(d).attrs,
10642
- listStyleType: item.style === "decimal" ? null : item.style
10643
- });
10644
- return true;
10645
- }
10646
- }
10647
- return true;
10648
- }).run();
10649
- }
10650
- },
10651
- /* @__PURE__ */ React112.createElement("span", { className: "bullet-style-icon" }, item.icon),
10652
- " ",
10653
- item.label
10654
- ))
10655
- )), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React112.createElement(
10657
+ /* @__PURE__ */ React112.createElement("span", { className: "bullet-style-icon" }, item.icon),
10658
+ " ",
10659
+ item.label
10660
+ ))))), (show("align") || show("indent") || show("outdent")) && /* @__PURE__ */ React112.createElement("div", { className: "toolbar-group" }, show("align") && /* @__PURE__ */ React112.createElement(
10656
10661
  Dropdown,
10657
10662
  {
10658
10663
  trigger: {
@@ -10900,7 +10905,7 @@ var Toolbar_default = Toolbar;
10900
10905
 
10901
10906
  // lib/RufousTextEditor/ImageToolbar.tsx
10902
10907
  import React113, { useState as useState31, useEffect as useEffect24, useRef as useRef27 } from "react";
10903
- import { createPortal } from "react-dom";
10908
+ import { createPortal as createPortal3 } from "react-dom";
10904
10909
  var ALIGNMENTS = [
10905
10910
  { value: "left", label: "Left", icon: "\u2630" },
10906
10911
  { value: "center", label: "Center", icon: "\u2261" },
@@ -11072,7 +11077,7 @@ var ImageToolbar = ({ editor }) => {
11072
11077
  }, [editor]);
11073
11078
  const node = editor?.state.selection.node;
11074
11079
  const isImage = node && node.type.name === "image";
11075
- if (!editor || !isImage || !pos) return showModal ? createPortal(
11080
+ if (!editor || !isImage || !pos) return showModal ? createPortal3(
11076
11081
  /* @__PURE__ */ React113.createElement(ImagePropertiesModal, { editor, node, onClose: () => setShowModal(false) }),
11077
11082
  document.body
11078
11083
  ) : null;
@@ -11149,7 +11154,7 @@ var ImageToolbar = ({ editor }) => {
11149
11154
  );
11150
11155
  setShowVAlign(false);
11151
11156
  };
11152
- return createPortal(
11157
+ return createPortal3(
11153
11158
  /* @__PURE__ */ React113.createElement(React113.Fragment, null, /* @__PURE__ */ React113.createElement(
11154
11159
  "div",
11155
11160
  {
@@ -11180,7 +11185,7 @@ var ImageToolbar_default = ImageToolbar;
11180
11185
 
11181
11186
  // lib/RufousTextEditor/VideoToolbar.tsx
11182
11187
  import React114, { useState as useState32, useEffect as useEffect25, useRef as useRef28 } from "react";
11183
- import { createPortal as createPortal2 } from "react-dom";
11188
+ import { createPortal as createPortal4 } from "react-dom";
11184
11189
  var ALIGNMENTS2 = [
11185
11190
  { value: "left", label: "Left", icon: "\u2630" },
11186
11191
  { value: "center", label: "Center", icon: "\u2261" },
@@ -11326,7 +11331,7 @@ var VideoToolbar = ({ editor }) => {
11326
11331
  const node = editor?.state.selection.node;
11327
11332
  const isVideo = node && VIDEO_TYPES.includes(node.type.name);
11328
11333
  const nodeType = node?.type.name;
11329
- if (!editor || !isVideo || !pos) return showModal ? createPortal2(
11334
+ if (!editor || !isVideo || !pos) return showModal ? createPortal4(
11330
11335
  /* @__PURE__ */ React114.createElement(VideoPropertiesModal, { editor, node, nodeType, onClose: () => setShowModal(false) }),
11331
11336
  document.body
11332
11337
  ) : null;
@@ -11373,7 +11378,7 @@ var VideoToolbar = ({ editor }) => {
11373
11378
  })
11374
11379
  );
11375
11380
  };
11376
- return createPortal2(
11381
+ return createPortal4(
11377
11382
  /* @__PURE__ */ React114.createElement(React114.Fragment, null, /* @__PURE__ */ React114.createElement(
11378
11383
  "div",
11379
11384
  {
@@ -11661,8 +11666,8 @@ var RufousTextEditor = ({
11661
11666
  setLinkUrl(previousUrl);
11662
11667
  setLinkText(selectedText || previousUrl);
11663
11668
  setLinkClassName(attrs.class && attrs.class !== "editor-link" ? attrs.class : "");
11664
- setLinkNewTab(attrs.target === "_blank" || !previousUrl);
11665
- setLinkNoFollow(attrs.rel ? attrs.rel.includes("nofollow") : true);
11669
+ setLinkNewTab(previousUrl ? attrs.target === "_blank" : true);
11670
+ setLinkNoFollow(previousUrl ? attrs.rel ? attrs.rel.includes("nofollow") : false : true);
11666
11671
  setLinkSelection({ from, to });
11667
11672
  setLinkModalOpen(true);
11668
11673
  }, [editor]);
@@ -11902,46 +11907,49 @@ var RufousTextEditor = ({
11902
11907
  },
11903
11908
  "\u201C Quote"
11904
11909
  )
11905
- ), /* @__PURE__ */ React115.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React115.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React115.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React115.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && /* @__PURE__ */ React115.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React115.createElement(
11906
- "input",
11907
- {
11908
- type: "url",
11909
- className: "link-modal-input",
11910
- value: linkUrl,
11911
- onChange: (e) => setLinkUrl(e.target.value),
11912
- onKeyDown: (e) => {
11913
- if (e.key === "Enter") handleLinkSubmit();
11914
- },
11915
- placeholder: "https://example.com",
11916
- autoFocus: true
11917
- }
11918
- )), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React115.createElement(
11919
- "input",
11920
- {
11921
- type: "text",
11922
- className: "link-modal-input",
11923
- value: linkText,
11924
- onChange: (e) => setLinkText(e.target.value),
11925
- onKeyDown: (e) => {
11926
- if (e.key === "Enter") handleLinkSubmit();
11927
- },
11928
- placeholder: "Link text"
11929
- }
11930
- )), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React115.createElement(
11931
- "input",
11932
- {
11933
- type: "checkbox",
11934
- checked: linkNewTab,
11935
- onChange: (e) => setLinkNewTab(e.target.checked)
11936
- }
11937
- ), "Open in new tab"), /* @__PURE__ */ React115.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React115.createElement(
11938
- "input",
11939
- {
11940
- type: "checkbox",
11941
- checked: linkNoFollow,
11942
- onChange: (e) => setLinkNoFollow(e.target.checked)
11943
- }
11944
- ), "No follow"))), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))))
11910
+ ), /* @__PURE__ */ React115.createElement("div", { className: "status-bar" }, /* @__PURE__ */ React115.createElement("div", { className: "status-bar-left" }, onSaveProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleSave, className: "status-btn save-btn" }, "Save"), onExportProp && /* @__PURE__ */ React115.createElement("button", { onClick: handleExport, className: "status-btn export-btn" }, "Export")), /* @__PURE__ */ React115.createElement("div", { className: "status-bar-right" }, saveStatus && /* @__PURE__ */ React115.createElement("span", { className: "save-status" }, saveStatus), editor && /* @__PURE__ */ React115.createElement(React115.Fragment, null, /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "CHARS: ", editor.storage.characterCount?.characters?.() ?? editor.getText().length), /* @__PURE__ */ React115.createElement("span", { className: "word-count" }, "WORDS: ", editor.storage.characterCount?.words?.() ?? editor.getText().split(/\s+/).filter(Boolean).length)))), linkModalOpen && createPortal5(
11911
+ /* @__PURE__ */ React115.createElement("div", { className: "link-modal-overlay", onClick: handleLinkCancel }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal", onClick: (e) => e.stopPropagation() }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-body" }, /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "URL"), /* @__PURE__ */ React115.createElement(
11912
+ "input",
11913
+ {
11914
+ type: "url",
11915
+ className: "link-modal-input",
11916
+ value: linkUrl,
11917
+ onChange: (e) => setLinkUrl(e.target.value),
11918
+ onKeyDown: (e) => {
11919
+ if (e.key === "Enter") handleLinkSubmit();
11920
+ },
11921
+ placeholder: "https://example.com",
11922
+ autoFocus: true
11923
+ }
11924
+ )), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-field" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-label" }, "Text"), /* @__PURE__ */ React115.createElement(
11925
+ "input",
11926
+ {
11927
+ type: "text",
11928
+ className: "link-modal-input",
11929
+ value: linkText,
11930
+ onChange: (e) => setLinkText(e.target.value),
11931
+ onKeyDown: (e) => {
11932
+ if (e.key === "Enter") handleLinkSubmit();
11933
+ },
11934
+ placeholder: "Link text"
11935
+ }
11936
+ )), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-checkboxes" }, /* @__PURE__ */ React115.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React115.createElement(
11937
+ "input",
11938
+ {
11939
+ type: "checkbox",
11940
+ checked: linkNewTab,
11941
+ onChange: (e) => setLinkNewTab(e.target.checked)
11942
+ }
11943
+ ), "Open in new tab"), /* @__PURE__ */ React115.createElement("label", { className: "link-modal-checkbox" }, /* @__PURE__ */ React115.createElement(
11944
+ "input",
11945
+ {
11946
+ type: "checkbox",
11947
+ checked: linkNoFollow,
11948
+ onChange: (e) => setLinkNoFollow(e.target.checked)
11949
+ }
11950
+ ), "No follow"))), /* @__PURE__ */ React115.createElement("div", { className: "link-modal-footer" }, /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-unlink", onClick: handleLinkRemove }, "Unlink"), /* @__PURE__ */ React115.createElement("button", { className: "link-modal-btn-apply", onClick: handleLinkSubmit }, "Update")))),
11951
+ document.body
11952
+ ))
11945
11953
  );
11946
11954
  };
11947
11955
  var RufousTextContent = ({ content, className, style, sx }) => {
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@rufous/ui",
3
3
  "private": false,
4
- "version": "0.2.57",
4
+ "version": "0.2.58",
5
5
  "type": "module",
6
6
  "description": "Experimental: A lightweight React UI component library (Beta)",
7
7
  "style": "./dist/main.css",