@opentiny/fluent-editor
Version:
A rich text editor based on Quill 2.0, which extends rich modules and formats on the basis of Quill. It's powerful and out-of-the-box.
247 lines (246 loc) • 7.72 kB
JavaScript
"use strict";
Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const Quill = require("quill");
const I18n = require("quill-i18n");
const QuillShortcutKey = require("quill-shortcut-key");
const is = require("../../utils/is.cjs.js");
class ShortCutKey extends QuillShortcutKey {
constructor(quill, options) {
super(quill, options);
this.quill = quill;
this.quill.on(I18n.I18N_LOCALE_CHANGE, () => {
this.destroyMenuList();
this.options = this.resolveOptions(options);
this.menuSorter = QuillShortcutKey.searchAndSort.bind(this, this.getAllMenuItems());
this.placeholderTip.remove();
this.placeholderTip = this.initPlaceholder();
this.placeholderUpdate();
});
}
resolveOptions(options) {
const defaultMenuItems = this.defaultMenuList();
const placeholder = this.quill.options.placeholder ? this.quill.options.placeholder : this.quill.getLangText("input-recall-menu-placeholder");
const value = Object.assign({
placeholder,
menuItems: defaultMenuItems,
isMenuItemsAdd: false,
menuKeyboardControls: () => false
}, options);
if (value.isMenuItemsAdd) {
value.menuItems = [...defaultMenuItems, ...value.menuItems];
}
const deepCopyMenuItems = (items) => {
return items.map((item) => {
const value2 = {
...item
};
if (item.title && is.isString(item.title)) {
value2.title = this.quill.getLangText(item.title);
}
if (item.type === "group") {
value2.children = deepCopyMenuItems(item.children);
}
return value2;
});
};
value.menuItems = deepCopyMenuItems(value.menuItems);
return value;
}
defaultMenuList() {
const icons = Quill.import("ui/icons");
const toolbarHandler = (format) => {
return function(range) {
if (!range) return;
const toolbarModule = this.getModule("toolbar");
if (!toolbarModule) return;
toolbarModule.handlers[format].call(toolbarModule, true);
};
};
const formatHandler = (format, value) => {
return function(range) {
if (!range) return;
this.formatLine(range.index, 0, format, value, Quill.sources.USER);
};
};
return [
...new Array(6).fill(0).map((_, i) => ({
type: "item",
name: `h${i + 1}`,
alias: ["header", `head${i + 1}`],
icon: icons.header[i + 1],
title: this.quill.getLangText(`header-${i + 1}`),
onClick: formatHandler("header", i + 1)
})),
{
type: "item",
name: "yy",
alias: ["blockquote"],
icon: icons.blockquote,
title: this.quill.getLangText("blockquote"),
onClick: formatHandler("blockquote", true)
},
{
type: "item",
name: "dm",
alias: ["code", "codeblock"],
icon: icons["code-block"],
title: this.quill.getLangText("code-block"),
onClick: formatHandler("code-block", true)
},
{
type: "item",
name: "lj",
alias: ["link"],
icon: icons.link,
title: this.quill.getLangText("link"),
onClick(range, _) {
if (!range) return;
const title = "link";
const link = prompt("Enter link URL");
if (!link) return;
this.insertText(range.index, title, Quill.sources.USER);
this.formatText(range.index, range.length + title.length, "link", link, Quill.sources.USER);
this.setSelection({ index: range.index, length: range.index + title.length });
}
},
{
type: "group",
name: "lb",
alias: [],
hideSearch: true,
icon: icons.list.bullet,
title: this.quill.getLangText("list"),
children: [
{
type: "item",
name: "wxlb",
alias: ["list", "bullet"],
icon: icons.list.bullet,
title: this.quill.getLangText("list-bullet"),
onClick: formatHandler("list", "bullet")
},
{
type: "item",
name: "yxlb",
alias: ["list", "ordered"],
icon: icons.list.ordered,
title: this.quill.getLangText("list-ordered"),
onClick: formatHandler("list", "ordered")
},
{
type: "item",
name: "rwlb",
alias: ["list", "check"],
icon: icons.list.check,
title: this.quill.getLangText("list-check"),
onClick: formatHandler("list", "unchecked")
}
]
},
{
type: "item",
name: "bq",
alias: ["emoji"],
icon: icons.emoji,
title: this.quill.getLangText("emoji"),
onClick(range, _) {
if (!range) return;
const toolbarModule = this.getModule("toolbar");
if (!toolbarModule) return;
toolbarModule.handlers.emoji.call(toolbarModule, true);
}
},
{
type: "item",
name: "jp",
alias: ["screenshot"],
icon: icons.screenshot,
title: this.quill.getLangText("screenshot"),
onClick: toolbarHandler("screenshot")
},
{
type: "item",
name: "gs",
alias: ["formula"],
icon: icons.formula,
title: this.quill.getLangText("formula"),
onClick: toolbarHandler("formula")
},
{
type: "item",
name: "tp",
alias: ["image", "pic", "picture"],
icon: icons.image,
title: this.quill.getLangText("image"),
onClick: toolbarHandler("image")
},
{
type: "item",
name: "sp",
alias: ["video"],
icon: icons.video,
title: this.quill.getLangText("video"),
onClick: toolbarHandler("video")
},
{
type: "item",
name: "wj",
alias: ["file"],
icon: icons.file,
title: this.quill.getLangText("file"),
onClick: toolbarHandler("file")
},
{
type: "item",
name: "swdt",
alias: ["mind-map"],
icon: icons["mind-map"],
title: this.quill.getLangText("mind-map"),
onClick: toolbarHandler("mind-map")
},
{
type: "item",
name: "lct",
alias: ["flow-chart"],
icon: icons["flow-chart"],
title: this.quill.getLangText("flow-chart"),
onClick: toolbarHandler("flow-chart")
}
];
}
}
const shortKey = {
...QuillShortcutKey.defaultShortKey,
link: {
key: "k",
shortKey: true,
handler(_, context) {
const toolbar = this.quill.getModule("toolbar");
if (!toolbar) return;
toolbar.handlers.link.call(toolbar, !context.format.link);
}
},
color: {
key: "c",
altKey: true,
shortKey: true,
handler() {
var _a;
const selected = this.quill.getModule("toolbar").container.querySelector(".ql-color.ql-color-picker .ql-picker-options .ql-selected");
this.quill.format("color", ((_a = selected == null ? void 0 : selected.dataset) == null ? void 0 : _a.value) || false, Quill.sources.USER);
}
},
background: {
key: "b",
altKey: true,
shortKey: true,
handler() {
var _a;
const selected = this.quill.getModule("toolbar").container.querySelector(".ql-background.ql-color-picker .ql-picker-options .ql-selected");
this.quill.format("background", ((_a = selected == null ? void 0 : selected.dataset) == null ? void 0 : _a.value) || false, Quill.sources.USER);
}
}
};
exports.ShortCutKey = ShortCutKey;
exports.shortKey = shortKey;
//# sourceMappingURL=index.cjs.js.map