@opentiny/fluent-editor 3.18.4 → 3.19.0-alpha.0

package/index.es.js

@@ -4854,7 +4854,7 @@ Block$4.blotName = "block";
 Block$4.tagName = "P";
 Block$4.defaultChild = Break$1;
 Block$4.allowedChildren = [Break$1, Inline$3, EmbedBlot$1, Text$1];
-class BlockEmbed extends EmbedBlot$1 {
+class BlockEmbed$1 extends EmbedBlot$1 {
   attach() {
     super.attach();
     this.attributes = new AttributorStore$1(this.domNode);
@@ -4895,7 +4895,7 @@ class BlockEmbed extends EmbedBlot$1 {
     }
   }
 }
-BlockEmbed.scope = Scope$1.BLOCK_BLOT;
+BlockEmbed$1.scope = Scope$1.BLOCK_BLOT;
 function blockDelta(blot) {
   let filter = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : true;
   return blot.descendants(LeafBlot$1).reduce((delta, leaf2) => {
@@ -5720,7 +5720,7 @@ class Editor {
         deleteDelta.retain(length);
         if (typeof op.insert === "string") {
           const text = op.insert;
-          isImplicitNewlineAppended = !text.endsWith("\n") && (scrollLength <= index || !!this.scroll.descendant(BlockEmbed, index)[0]);
+          isImplicitNewlineAppended = !text.endsWith("\n") && (scrollLength <= index || !!this.scroll.descendant(BlockEmbed$1, index)[0]);
           this.scroll.insertAt(index, text);
           const [line, offset] = this.scroll.line(index);
           let formats = deepmerge({}, bubbleFormats(line));
@@ -5737,7 +5737,7 @@ class Editor {
             return index;
           const isInlineEmbed = this.scroll.query(key, Scope$1.INLINE) != null;
           if (isInlineEmbed) {
-            if (scrollLength <= index || !!this.scroll.descendant(BlockEmbed, index)[0]) {
+            if (scrollLength <= index || !!this.scroll.descendant(BlockEmbed$1, index)[0]) {
               isImplicitNewlineAppended = true;
             }
           } else if (index > 0) {
@@ -6103,7 +6103,7 @@ class Module$5 {
 }
 __publicField(Module$5, "DEFAULTS", {});
 const GUARD_TEXT = "\uFEFF";
-class Embed$6 extends EmbedBlot$1 {
+class Embed$5 extends EmbedBlot$1 {
   constructor(scroll, node) {
     super(scroll, node);
     this.contentNode = document.createElement("span");
@@ -6196,7 +6196,7 @@ class Composition {
   }
   handleCompositionStart(event) {
     const blot = event.target instanceof Node ? this.scroll.find(event.target, true) : null;
-    if (blot && !(blot instanceof Embed$6)) {
+    if (blot && !(blot instanceof Embed$5)) {
       this.emitter.emit(Emitter.events.COMPOSITION_BEFORE_START, event);
       this.scroll.batchStart();
       this.emitter.emit(Emitter.events.COMPOSITION_START, event);
@@ -6907,7 +6907,7 @@ function shiftRange(range, index, lengthOrSource, source2) {
 class Container$2 extends ContainerBlot$1 {
 }
 function isLine$1(blot) {
-  return blot instanceof Block$4 || blot instanceof BlockEmbed;
+  return blot instanceof Block$4 || blot instanceof BlockEmbed$1;
 }
 function isUpdatable(blot) {
   return typeof blot.updateContent === "function";
@@ -6950,7 +6950,7 @@ class Scroll extends ScrollBlot$1 {
     const [last] = this.line(index + length);
     super.deleteAt(index, length);
     if (last != null && first !== last && offset > 0) {
-      if (first instanceof BlockEmbed || last instanceof BlockEmbed) {
+      if (first instanceof BlockEmbed$1 || last instanceof BlockEmbed$1) {
         this.optimize();
         return;
       }
@@ -7004,7 +7004,7 @@ class Scroll extends ScrollBlot$1 {
     this.batchStart();
     const first = renderBlocks.shift();
     if (first) {
-      const shouldInsertNewlineChar = first.type === "block" && (first.delta.length() === 0 || !this.descendant(BlockEmbed, index)[0] && index < this.length());
+      const shouldInsertNewlineChar = first.type === "block" && (first.delta.length() === 0 || !this.descendant(BlockEmbed$1, index)[0] && index < this.length());
       const delta2 = first.type === "block" ? first.delta : new Delta$7().insert({
         [first.key]: first.value
       });
@@ -7127,7 +7127,7 @@ class Scroll extends ScrollBlot$1 {
     }
   }
   updateEmbedAt(index, key, change) {
-    const [blot] = this.descendant((b) => b instanceof BlockEmbed, index);
+    const [blot] = this.descendant((b) => b instanceof BlockEmbed$1, index);
     if (blot && blot.statics.blotName === key && isUpdatable(blot)) {
       blot.updateContent(change);
     }
@@ -7218,7 +7218,7 @@ __publicField(Scroll, "blotName", "scroll");
 __publicField(Scroll, "className", "ql-editor");
 __publicField(Scroll, "tagName", "DIV");
 __publicField(Scroll, "defaultChild", Block$4);
-__publicField(Scroll, "allowedChildren", [Block$4, BlockEmbed, Container$2]);
+__publicField(Scroll, "allowedChildren", [Block$4, BlockEmbed$1, Container$2]);
 function insertInlineContents(parent, index, inlineContents) {
   inlineContents.reduce((index2, op) => {
     const length = Delta$8.exports.Op.length(op);
@@ -8510,7 +8510,7 @@ function matchNewline(node, delta, scroll) {
           return delta.insert("\n");
         }
         const match2 = scroll.query(nextSibling);
-        if (match2 && match2.prototype instanceof BlockEmbed) {
+        if (match2 && match2.prototype instanceof BlockEmbed$1) {
           return delta.insert("\n");
         }
         nextSibling = nextSibling.firstChild;
@@ -8968,11 +8968,11 @@ class UINode extends Module$5 {
 }
 Quill.register({
   "blots/block": Block$4,
-  "blots/block/embed": BlockEmbed,
+  "blots/block/embed": BlockEmbed$1,
   "blots/break": Break$1,
   "blots/container": Container$2,
   "blots/cursor": Cursor,
-  "blots/embed": Embed$6,
+  "blots/embed": Embed$5,
   "blots/inline": Inline$3,
   "blots/scroll": Scroll,
   "blots/text": Text$1,
@@ -9147,7 +9147,7 @@ class Underline extends Inline$3 {
 }
 __publicField(Underline, "blotName", "underline");
 __publicField(Underline, "tagName", "U");
-class Formula extends Embed$6 {
+class Formula extends Embed$5 {
   static create(value) {
     if (window.katex == null) {
       throw new Error("Formula module requires KaTeX.");
@@ -9216,7 +9216,7 @@ class Image extends EmbedBlot$1 {
 __publicField(Image, "blotName", "image");
 __publicField(Image, "tagName", "IMG");
 const ATTRIBUTES$5 = ["height", "width"];
-class Video$1 extends BlockEmbed {
+class Video$1 extends BlockEmbed$1 {
   static create(value) {
     const node = super.create(value);
     node.setAttribute("frameborder", "0");
@@ -11186,6 +11186,7 @@ const FULLSCREEN_ICON = `<svg xmlns="http://www.w3.org/2000/svg" class="icon" wi
     <path fill="#333333" d="M64 384h96V160h224.2V64H64zM639.8 64v96H864v224h96V64zM864 864H639.8v96H960V639.61h-96zM160 639.61H64V960h320.2v-96H160z"/>
 </svg>`;
 const TRIANGLE_DOWN_ICON = `<i class="icon-triangle-down"></i>`;
+const FORMAT_PAINTER_ICON = `<svg viewBox="0 0 32 32"><path fill="currentColor" d="M28.83 23.17L23 17.33V13a1 1 0 0 0-.29-.71l-10-10a1 1 0 0 0-1.42 0l-9 9a1 1 0 0 0 0 1.42l10 10A1 1 0 0 0 13 23h4.34l5.83 5.84a4 4 0 0 0 5.66-5.66ZM6 10.41l2.29 2.3l1.42-1.42L7.41 9L9 7.41l4.29 4.3l1.42-1.42L10.41 6L12 4.41L18.59 11L11 18.59L4.41 12Zm21.41 17a2 2 0 0 1-2.82 0l-6.13-6.12a1.8 1.8 0 0 0-.71-.29h-4.34l-1-1L20 12.41l1 1v4.34a1 1 0 0 0 .29.7l6.12 6.14a2 2 0 0 1 0 2.82"/></svg>`;
 const Delta$6 = Quill.imports["delta"];
 function hexToRgbA(hex) {
   let color;
@@ -11559,7 +11560,8 @@ const ICONS_CONFIG = {
   fullscreen: FULLSCREEN_ICON,
   emoji: EMOJI_ICON,
   help: HELP_ICON,
-  screenshot: SCREENSHOT_ICON
+  screenshot: SCREENSHOT_ICON,
+  "format-painter": FORMAT_PAINTER_ICON
 };
 const TABLE_RIGHT_MENU_CONFIG = {
   copyCells: {
@@ -12224,10 +12226,10 @@ function renderStyles(html) {
   iframe.parentNode.removeChild(iframe);
   return convertedString;
 }
-const Embed$5 = Quill.imports["blots/embed"];
+const Embed$4 = Quill.imports["blots/embed"];
 const Inline$2 = Quill.imports["blots/inline"];
 const ATTRIBUTES$4 = ["alt", "height", "width", "image-id"];
-const _CustomImage = class extends Embed$5 {
+const _CustomImage = class extends Embed$4 {
   static create(value) {
     const node = super.create(value);
     const url = typeof value === "string" ? value : value.src;
@@ -13136,8 +13138,8 @@ const emojiMap = {};
 emojiList.forEach((emojiListObject) => {
   emojiMap[emojiListObject.name] = emojiListObject;
 });
-const Embed$4 = Quill.imports["blots/embed"];
-class EmojiBlot extends Embed$4 {
+const Embed$3 = Quill.imports["blots/embed"];
+class EmojiBlot extends Embed$3 {
   static create(value) {
     const node = super.create();
     if (typeof value === "object") {
@@ -13562,9 +13564,9 @@ function fnUpdateEmojiContainer(emojiFilter, panel, quill) {
   fnEmojiElementsToPanel(type, panel, quill);
 }
 var Emoji = { EmojiBlot, ShortNameEmoji, ToolbarEmoji };
-const Embed$3 = Quill.imports["blots/embed"];
+const Embed$2 = Quill.imports["blots/embed"];
 const FILE_ATTRIBUTES = ["id", "title", "size", "lastModified"];
-class File$1 extends Embed$3 {
+class File$1 extends Embed$2 {
   static create(value) {
     const node = super.create(value);
     const size = value.size / 1024;
@@ -14095,7 +14097,10 @@ class Tooltip extends BaseTooltip {
     );
   }
   save() {
-    let { value } = this.textbox;
+    let value = this.textbox.value;
+    if (!value)
+      return;
+    this.textbox.value = "";
     switch (this.root.getAttribute("data-mode")) {
       case "link": {
         const { scrollTop } = this.quill.root;
@@ -14119,9 +14124,6 @@ class Tooltip extends BaseTooltip {
         break;
       }
       case "formula": {
-        if (!value) {
-          break;
-        }
         const range = this.quill.getSelection(true);
         if (!isNullOrUndefined(range)) {
           const index = range.index + range.length;
@@ -14138,6 +14140,16 @@ class Tooltip extends BaseTooltip {
         }
         break;
       }
+      case "video": {
+        const range = this.quill.getSelection(true);
+        this.quill.insertText(range.index, "\n", Emitter.sources.USER);
+        this.quill.insertEmbed(range.index + 1, "video", { src: value }, Emitter.sources.USER);
+        this.quill.insertText(range.index + 2, "\n", Emitter.sources.USER);
+        this.quill.setSelection(range.index + 3, Emitter.sources.SILENT);
+        this.textbox.value = "";
+        this.hide();
+        break;
+      }
     }
   }
   position(reference) {
@@ -14234,8 +14246,8 @@ SnowTheme$1.prototype.extendToolbar = function(toolbar) {
 const ON_MENTION_LINK_REMOVE = "mention-link/remove";
 const MENTION_CHAR = "mentionChar";
 const DEFAULT_MENTION_CHAR = "@";
-const Embed$2 = Quill.imports["blots/embed"];
-class MentionLink extends Embed$2 {
+const Embed$1 = Quill.imports["blots/embed"];
+class MentionLink extends Embed$1 {
   constructor(scroll, domNode, data) {
     super(scroll, domNode, data);
     this.mentionData = data;
@@ -14591,8 +14603,8 @@ class Mention {
     this.quill.setSelection(this.latestMentionCharPos + 1, Quill.sources.API);
   }
 }
-const Embed$1 = Quill.imports["blots/embed"];
-class SoftBreak extends Embed$1 {
+const Embed = Quill.imports["blots/embed"];
+class SoftBreak extends Embed {
   static create() {
     const node = super.create();
     return node;
@@ -50839,24 +50851,23 @@ class BetterToolbar extends Toolbar {
     this.controls.push([format, input]);
   }
 }
-const Embed = Quill.imports["blots/embed"];
+const BlockEmbed = Quill.imports["blots/block/embed"];
 const VIDEO_ATTRIBUTES = ["id", "title", "src"];
-class Video extends Embed {
+class Video extends BlockEmbed {
   static sanitize(url) {
     return sanitize(url, this.PROTOCOL_WHITELIST) ? url : this.SANITIZED_URL;
   }
   static create(value) {
     const node = super.create(value);
-    node.setAttribute("contenteditable", false);
+    node.setAttribute("contenteditable", "false");
     node.setAttribute("controls", "controls");
     VIDEO_ATTRIBUTES.forEach((key) => {
       if (value[key]) {
         switch (key) {
-          case "src": {
+          case "src":
             const src = Video.sanitize(value[key]);
             node.setAttribute(key, src);
             break;
-          }
           case "title":
             node.setAttribute(key, value[key]);
             break;
@@ -50877,22 +50888,81 @@ class Video extends Embed {
     });
     return formats;
   }
-  static formats(domNode) {
-    const formats = {};
-    VIDEO_ATTRIBUTES.forEach((key) => {
-      const value = domNode.getAttribute(key) || domNode.dataset[key];
-      if (value) {
-        formats[key] = value;
-      }
-    });
-    return formats;
-  }
 }
 Video.blotName = "video";
 Video.tagName = "VIDEO";
 Video.SANITIZED_URL = "about:blank";
 Video.PROTOCOL_WHITELIST = ["http", "https"];
 Video.className = "ql-video-item";
+class FormatPainter {
+  constructor(quill) {
+    this.quill = quill;
+    this.isFormatterLock = false;
+    this.isFormating = false;
+    this.rangeFormat = {};
+    this.btnActive = () => {
+      setTimeout(() => {
+        this.formatterBtn.classList.add("ql-active");
+      }, 0);
+    };
+    this.btnRemoveActive = () => {
+      setTimeout(() => {
+        this.formatterBtn.classList.remove("ql-active");
+      }, 0);
+    };
+    this.bindFormatSelect = () => {
+      const range = this.quill.getSelection();
+      if (range.length === 0)
+        return;
+      this.rangeFormat = this.quill.getFormat(range);
+      this.isFormating = true;
+      this.quill.on(Quill.events.SELECTION_CHANGE, this.formatRange);
+      this.btnActive();
+    };
+    this.unbindFormatSelect = () => {
+      this.quill.off(Quill.events.SELECTION_CHANGE, this.formatRange);
+      this.rangeFormat = void 0;
+      this.btnRemoveActive();
+      this.isFormating = false;
+      this.isFormatterLock = false;
+    };
+    this.formatRange = (range) => {
+      if (!range)
+        return;
+      this.quill.removeFormat(range.index, range.length);
+      for (const format in this.rangeFormat) {
+        this.quill.format(format, this.rangeFormat[format], Quill.sources.USER);
+      }
+      if (!this.isFormatterLock) {
+        this.unbindFormatSelect();
+      } else {
+        this.btnActive();
+      }
+    };
+    this.quill = quill;
+    const toolbar = this.quill.getModule("toolbar");
+    this.formatterBtn = toolbar.container.querySelector(".ql-format-painter");
+    if (toolbar && this.formatterBtn) {
+      this.formatterBtn.addEventListener("dblclick", () => {
+        if (this.isFormatterLock) {
+          this.unbindFormatSelect();
+          return;
+        }
+        this.isFormatterLock = true;
+        this.bindFormatSelect();
+      });
+      this.formatterBtn.addEventListener("click", () => {
+        if (!this.isFormating) {
+          this.bindFormatSelect();
+        } else {
+          this.unbindFormatSelect();
+        }
+      });
+    }
+  }
+}
+FormatPainter.toolName = "format-painter";
+FormatPainter.moduleName = "format-painter";
 const registerModules = function() {
   const FontClass2 = Quill.imports["formats/font"];
   FontClass2.whitelist = FONT_FAMILY_CONFIG;
@@ -50906,6 +50976,11 @@ const registerModules = function() {
   const SnowTheme2 = Quill.imports["themes/snow"];
   SnowTheme2.DEFAULTS = {
     modules: {
+      keyboard: {
+        bindings: {
+          ...BetterTable.keyboardBindings
+        }
+      },
       toolbar: {
         handlers: {
           ...SnowTheme2.DEFAULTS.modules.toolbar.handlers,
@@ -50984,7 +51059,8 @@ const registerModules = function() {
             right: '<i class="icon-text-align-right"></i>'
           }
         }
-      }
+      },
+      "format-painter": {}
     }
   };
   Quill.register(
@@ -51007,7 +51083,8 @@ const registerModules = function() {
       "modules/emoji-toolbar": Emoji.ToolbarEmoji,
       "modules/emoji-shortname": Emoji.ShortNameEmoji,
       "modules/link": Link,
-      "modules/syntax": CustomSyntax
+      "modules/syntax": CustomSyntax,
+      "modules/format-painter": FormatPainter
     },
     true
   );