@mnykj/wangeditoroptimize-basic-modules 1.0.0

package/dist/basic-modules/src/utils/block-toolbar.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @description 块顶栏按钮 vnode 工厂（blockquote / pre / table / video 共用）
+ */
+import { VNode } from 'snabbdom';
+export declare function makeBlockToolbarButton(opts: {
+    action: string;
+    title: string;
+    iconSvg: string;
+    actionAttr: string;
+    className: string;
+    disabled?: boolean;
+    active?: boolean;
+}): VNode;
+export declare function makeBlockToolbarSpacer(className: string): VNode;

package/dist/basic-modules/src/utils/dom.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @description DOM 操作
+ * @author wangfupeng
+ */
+import $, { Dom7Array } from 'dom7';
+export { Dom7Array } from 'dom7';
+export default $;
+/**
+ * 判断 str 是不是纯字符串，而不是 html tag
+ * @param str str
+ */
+export declare function isPlainText(str: string): boolean;
+/**
+ * 获取 outerHTML
+ * @param $elem dom7 elem
+ */
+export declare function getOuterHTML($elem: Dom7Array): string;
+/**
+ * 获取 tagName lower-case
+ * @param $elem $elem
+ */
+export declare function getTagName($elem: Dom7Array): string;
+/**
+ * 获取 $elem 某一个 style 值
+ * @param $elem $elem
+ * @param styleKey style key
+ */
+export declare function getStyleValue($elem: Dom7Array, styleKey: string): string;
+import DOMNode = globalThis.Node;
+import DOMComment = globalThis.Comment;
+import DOMElement = globalThis.Element;
+import DOMText = globalThis.Text;
+import DOMRange = globalThis.Range;
+import DOMSelection = globalThis.Selection;
+import DOMStaticRange = globalThis.StaticRange;
+export { DOMNode, DOMComment, DOMElement, DOMText, DOMRange, DOMSelection, DOMStaticRange };

package/dist/basic-modules/src/utils/util.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description 工具函数
+ * @author wangfupeng
+ */
+/**
+ * 获取随机数字符串
+ * @param prefix 前缀
+ * @returns 随机数字符串
+ */
+export declare function genRandomStr(prefix?: string): string;
+export declare function replaceSymbols(str: string): string;

package/dist/basic-modules/src/utils/vdom.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description vdom utils fn
+ * @author wangfupeng
+ */
+import { VNode, VNodeStyle } from 'snabbdom';
+/**
+ * 给 vnode 添加样式
+ * @param vnode vnode
+ * @param newStyle { key: val }
+ */
+export declare function addVnodeStyle(vnode: VNode, newStyle: VNodeStyle): void;

package/dist/css/style.css

@@ -0,0 +1 @@
+.w-e-text-container [data-slate-editor] code{background-color:var(--w-e-textarea-slight-bg-color);border-radius:3px;font-family:monospace;padding:3px}.w-e-panel-content-color{list-style:none;text-align:left;width:230px}.w-e-panel-content-color li{border:1px solid var(--w-e-toolbar-bg-color);border-radius:3px 3px;cursor:pointer;display:inline-block;padding:2px}.w-e-panel-content-color li:hover{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color li .color-block{border:1px solid var(--w-e-toolbar-border-color);border-radius:3px 3px;height:17px;width:17px}.w-e-panel-content-color .active{border-color:var(--w-e-toolbar-color)}.w-e-panel-content-color .clear{line-height:1.5;margin-bottom:5px;width:100%}.w-e-panel-content-color .clear svg{height:16px;margin-bottom:-4px;width:16px}.w-e-text-container [data-slate-editor] blockquote{--bq-accent:#2bc292;--bq-accent-dark:#1fa87a;--bq-tint:#e6f9f3;--bq-tint-strong:#c9f0e2;background:var(--bq-tint);border-left:4px solid var(--bq-accent);border-radius:4px;color:#333;display:block;font-size:100%;line-height:1.5;margin:.5rem 0;overflow:hidden;padding:.75rem 1rem}.w-e-text-container [data-slate-editor] blockquote.mdg-bq-with-toolbar{padding-top:0}.w-e-text-container .mdg-bq-toolbar{align-items:center;background:linear-gradient(180deg,var(--bq-tint-strong) 0,#d8f5eb 100%);border-bottom:1px solid rgba(43,194,146,.28);cursor:default;display:flex;gap:.15rem;margin:0 -1rem .55rem;padding:.28rem .55rem .28rem .7rem;-moz-user-select:none;user-select:none;-webkit-user-select:none}.w-e-text-container .mdg-bq-toolbar-spacer{flex:1;min-width:.5rem}.w-e-text-container .mdg-bq-toolbar-label{color:var(--bq-accent-dark);flex:none;font-size:12px;font-weight:600;letter-spacing:.02em;padding:0 .35rem 0 .1rem}.w-e-text-container .mdg-bq-btn{align-items:center;background:transparent;border:none;border-radius:4px;color:var(--bq-accent-dark);cursor:pointer;display:inline-flex;flex:none;height:26px;justify-content:center;line-height:0;margin:0;padding:0;width:28px}.w-e-text-container .mdg-bq-btn svg{fill:currentColor;height:14px;width:14px}.w-e-text-container .mdg-bq-btn:hover:not(.is-disabled){background:rgba(43,194,146,.18);color:#178a64}.w-e-text-container .mdg-bq-btn:active:not(.is-disabled){background:rgba(43,194,146,.28)}.w-e-text-container .mdg-bq-btn.is-disabled,.w-e-text-container .mdg-bq-btn:disabled{cursor:not-allowed;opacity:.35}.w-e-panel-content-emotion{font-size:20px;list-style:none;text-align:left;width:300px}.w-e-panel-content-emotion li{border-radius:3px 3px;cursor:pointer;display:inline-block;padding:0 5px}.w-e-panel-content-emotion li:hover{background-color:var(--w-e-textarea-slight-bg-color)}.w-e-textarea-divider{border-radius:3px;box-sizing:border-box;margin:0;outline:2px solid transparent;outline-offset:2px;padding:10px 0;transition:outline-color .12s ease;width:100%}.w-e-textarea-divider[data-selected=true]{outline-color:#2bc292}.w-e-textarea-divider hr{background-color:var(--w-e-textarea-border-color);border:0;display:block;height:1px;margin:0;width:100%}.w-e-text-container [data-slate-editor] pre>code{background-color:var(--w-e-textarea-slight-bg-color);border:1px solid var(--w-e-textarea-slight-border-color);border-radius:4px 4px;display:block;font-size:15px;padding:10px;text-indent:0}.w-e-text-container [data-slate-editor] pre>code.w-e-code-word-wrap{word-wrap:break-word;overflow-wrap:break-word;white-space:pre-wrap}.w-e-text-container [data-slate-editor] pre.mdg-pre-with-toolbar{--pre-surface:#f6f4f0;--pre-toolbar:#eceae6;--pre-line:#d4d0c8;background:var(--pre-surface);border:1px solid var(--pre-line);border-radius:4px;box-sizing:border-box;margin:.5rem 0;overflow:hidden;padding:0;position:relative}.w-e-text-container [data-slate-editor] pre.mdg-pre-with-toolbar>code{background:transparent;border:none;border-radius:0;box-shadow:none;box-sizing:border-box;display:block;margin:0;padding:.65rem .85rem}.w-e-text-container .mdg-pre-toolbar{align-items:center;background:var(--pre-toolbar);border:none;border-bottom:1px solid var(--pre-line);border-radius:0;cursor:default;display:flex;flex-wrap:wrap;gap:.25rem;margin:0;padding:.25rem .5rem;-webkit-user-select:none;-moz-user-select:none;user-select:none}.w-e-text-container .mdg-pre-toolbar-spacer{flex:1;min-width:.5rem}.w-e-text-container .mdg-pre-btn{align-items:center;background:transparent;border:none;border-radius:4px;color:#595959;cursor:pointer;display:inline-flex;flex:none;height:26px;justify-content:center;line-height:0;margin:0;padding:0;width:28px}.w-e-text-container .mdg-pre-btn svg{fill:currentColor;height:14px;width:14px}.w-e-text-container .mdg-pre-btn:hover:not(.is-disabled){background:rgba(0,0,0,.06);color:#262626}.w-e-text-container .mdg-pre-btn.is-disabled,.w-e-text-container .mdg-pre-btn:disabled{cursor:not-allowed;opacity:.35}.w-e-text-container .mdg-pre-lang-btn{align-items:center;background:#fff;border:1px solid #d9d9d9;border-radius:4px;color:#333;cursor:pointer;display:inline-flex;font-size:12px;gap:4px;height:26px;padding:0 8px}.w-e-text-container .mdg-pre-lang-btn:hover{border-color:#2bc292;color:#1fa87a}.w-e-text-container .mdg-pre-lang-text{max-width:7em;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.w-e-text-container .mdg-pre-lang-caret{font-size:10px;opacity:.55}.w-e-text-container .mdg-pre-wrap-btn{align-items:center;background:transparent;border:none;border-radius:4px;color:#595959;cursor:pointer;display:inline-flex;font-size:12px;gap:6px;height:26px;padding:0 8px}.w-e-text-container .mdg-pre-wrap-btn:hover{background:rgba(0,0,0,.06)}.w-e-text-container .mdg-pre-wrap-switch{background:#d9d9d9;border-radius:8px;height:16px;position:relative;width:28px}.w-e-text-container .mdg-pre-wrap-switch:after{background:#fff;border-radius:50%;content:"";height:12px;left:2px;position:absolute;top:2px;transition:left .15s ease;width:12px}.w-e-text-container .mdg-pre-wrap-btn.is-active{color:#1fa87a}.w-e-text-container .mdg-pre-wrap-btn.is-active .mdg-pre-wrap-switch{background:#2bc292}.w-e-text-container .mdg-pre-wrap-btn.is-active .mdg-pre-wrap-switch:after{left:14px}.mdg-pre-lang-panel{background:#fff;border:1px solid #d9d9d9;border-radius:4px;box-shadow:0 4px 12px rgba(0,0,0,.12);max-height:240px;overflow:auto;padding:4px 0;position:fixed;z-index:10050}.mdg-pre-lang-option{background:transparent;border:none;color:#333;cursor:pointer;display:block;font-size:13px;padding:6px 12px;text-align:left;width:100%}.mdg-pre-lang-option.is-selected,.mdg-pre-lang-option:hover{background:#e6f9f3;color:#1fa87a}.w-e-text-container [data-slate-editor] .w-e-image-container{display:inline-block;margin:0 3px}.w-e-text-container [data-slate-editor] .w-e-image-container:hover{box-shadow:0 0 0 2px var(--w-e-textarea-selected-border-color)}.w-e-text-container [data-slate-editor] .w-e-selected-image-container{overflow:hidden;position:relative}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .w-e-image-dragger{background-color:var(--w-e-textarea-handler-bg-color);height:7px;position:absolute;width:7px}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-top{cursor:nwse-resize;left:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-top{cursor:nesw-resize;right:0;top:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .left-bottom{bottom:0;cursor:nesw-resize;left:0}.w-e-text-container [data-slate-editor] .w-e-selected-image-container .right-bottom{bottom:0;cursor:nwse-resize;right:0}.w-e-text-container [contenteditable=false] .w-e-image-container:hover,.w-e-text-container [data-slate-editor] .w-e-selected-image-container:hover{box-shadow:none}.editor-content.mdg-format-painter-on,.editor-content.w-e-format-painter-on,.w-e-text-container.w-e-format-painter-on,html.mdg-format-painter-on,html.w-e-format-painter-on{cursor:var(--w-e-format-painter-cursor,var(--mdg-format-painter-cursor,text))!important}.editor-content.mdg-format-painter-on .w-e-hover-bar,.editor-content.w-e-format-painter-on .w-e-hover-bar,html.mdg-format-painter-on .w-e-hover-bar,html.w-e-format-painter-on .w-e-hover-bar{display:none!important;pointer-events:none!important;visibility:hidden!important}.editor-content.mdg-format-painter-on,.editor-content.mdg-format-painter-on .w-e-text-container,.editor-content.mdg-format-painter-on [data-slate-editor],.editor-content.mdg-format-painter-on [data-slate-editor] *,.editor-content.w-e-format-painter-on,.editor-content.w-e-format-painter-on .w-e-text-container,.editor-content.w-e-format-painter-on [data-slate-editor],.editor-content.w-e-format-painter-on [data-slate-editor] *,html.mdg-format-painter-on .editor-content,html.mdg-format-painter-on .editor-content .w-e-text-container,html.mdg-format-painter-on .editor-content [data-slate-editor],html.mdg-format-painter-on .editor-content [data-slate-editor] *,html.w-e-format-painter-on .editor-content,html.w-e-format-painter-on .editor-content .w-e-text-container,html.w-e-format-painter-on .editor-content [data-slate-editor],html.w-e-format-painter-on .editor-content [data-slate-editor] *{cursor:var(--w-e-format-painter-cursor,var(--mdg-format-painter-cursor,text))!important}.w-e-text-container .w-e-modal:has(.mdgch-edit-link-form),.w-e-text-container .w-e-modal:has(.w-e-link-form){padding:14px 14px 12px}.w-e-text-container .w-e-modal:has(.mdgch-edit-link-form) .btn-close,.w-e-text-container .w-e-modal:has(.w-e-link-form) .btn-close{display:none!important}.mdgch-edit-link-form,.w-e-link-form.mdgch-edit-link-form{box-sizing:border-box;padding:0}.mdgch-edit-link-row{align-items:center;display:flex;gap:8px;margin-bottom:10px}.mdgch-edit-link-label{color:#333;flex:0 0 28px;font-size:14px;line-height:32px;text-align:left}.mdgch-edit-link-input{background:#fff;border:1px solid #d9d9d9;border-radius:4px;box-sizing:border-box;color:#333;flex:1;font-size:14px;height:32px;min-width:0;padding:4px 10px}.mdgch-edit-link-input:focus{border-color:#2bc292;outline:none}.mdgch-edit-link-visit,.mdgch-edit-link-visit-spacer{background:transparent;border:none;color:#8c8c8c;flex:0 0 28px;font-size:14px;line-height:32px;padding:0;text-align:center;white-space:nowrap;width:28px}.mdgch-edit-link-visit{cursor:pointer}.mdgch-edit-link-visit-spacer{pointer-events:none;-webkit-user-select:none;-moz-user-select:none;user-select:none;visibility:hidden}.mdgch-edit-link-visit:hover{color:#2bc292}.mdgch-edit-link-actions{align-items:center;display:flex;gap:8px;justify-content:flex-end;margin-top:2px}.mdgch-edit-link-btn{border-radius:4px;box-sizing:border-box;cursor:pointer;font-size:13px;height:30px;line-height:28px;min-width:60px;padding:0 12px}.mdgch-edit-link-btn-cancel{background:#fff;border:1px solid #d9d9d9;color:#333}.mdgch-edit-link-btn-cancel:hover{border-color:#2bc292;color:#2bc292}.mdgch-edit-link-btn-ok{background:#2bc292;border:1px solid #2bc292;color:#fff}.mdgch-edit-link-btn-ok:hover{background:#1fa87a;border-color:#1fa87a}.w-e-text-container.mdg-link-modal-open .w-e-hover-bar,.w-e-text-container.w-e-link-modal-open .w-e-hover-bar{display:none!important}