@mnykj/wangeditoroptimize-code-highlight 1.0.0

package/README.md

@@ -0,0 +1,3 @@
+# wangEditor code highlight
+
+Code highlight module built in [wangEditor](https://www.wangeditor.com/) by default.

package/dist/code-highlight/src/constants/svg.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description icon svg
+ * @author wangfupeng
+ */
+/**
+ * 【注意】svg 字符串的长度 ，否则会导致代码体积过大
+ * 尽量选择 https://www.iconfont.cn/collections/detail?spm=a313x.7781069.0.da5a778a4&cid=20293
+ * 找不到再从 iconfont.com 搜索
+ */
+export declare const JS_SVG = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M64 64v896h896V64H64z m487.6 698.8c0 87.2-51.2 127-125.8 127-67.4 0-106.4-34.8-126.4-77l68.6-41.4c13.2 23.4 25.2 43.2 54.2 43.2 27.6 0 45.2-10.8 45.2-53V475.4h84.2v287.4z m199.2 127c-78.2 0-128.8-37.2-153.4-86l68.6-39.6c18 29.4 41.6 51.2 83 51.2 34.8 0 57.2-17.4 57.2-41.6 0-28.8-22.8-39-61.4-56l-21-9c-60.8-25.8-101-58.4-101-127 0-63.2 48.2-111.2 123.2-111.2 53.6 0 92 18.6 119.6 67.4L800 580c-14.4-25.8-30-36-54.2-36-24.6 0-40.2 15.6-40.2 36 0 25.2 15.6 35.4 51.8 51.2l21 9c71.6 30.6 111.8 62 111.8 132.4 0 75.6-59.6 117.2-139.4 117.2z\"></path></svg>";

package/dist/code-highlight/src/custom-types.d.ts

@@ -0,0 +1,19 @@
+/**
+ * @description 自定义 element
+ * @author wangfupeng
+ */
+declare type PureText = {
+    text: string;
+};
+export declare type PreElement = {
+    type: 'pre';
+    children: CodeElement[];
+};
+export declare type CodeElement = {
+    type: 'code';
+    language: string;
+    /** 代码块自动换行（HTML: data-word-wrap） */
+    wordWrap?: boolean;
+    children: PureText[];
+};
+export {};

package/dist/code-highlight/src/decorate/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description code-highlight decorate
+ * @author wangfupeng
+ */
+import { Node, NodeEntry, Range } from 'slate';
+declare const codeHighLightDecorate: (nodeEntry: NodeEntry<Node>) => Range[];
+export default codeHighLightDecorate;

package/dist/code-highlight/src/index.d.ts

@@ -0,0 +1,9 @@
+/**
+ * @description code-highlight
+ * @author wangfupeng
+ */
+import './assets/index.less';
+import './locale/index';
+import wangEditorCodeHighlightModule from './module/index';
+import wangEditorCodeHighLightDecorate from './decorate';
+export { wangEditorCodeHighlightModule, wangEditorCodeHighLightDecorate };

package/dist/code-highlight/src/locale/en.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description i18n en
+ * @author wangfupeng
+ */
+declare const _default: {
+    highLightModule: {
+        selectLang: string;
+    };
+};
+export default _default;

package/dist/code-highlight/src/locale/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * @description i18n entry
+ * @author wangfupeng
+ */
+export {};

package/dist/code-highlight/src/locale/zh-CN.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @description i18n zh-CN
+ * @author wangfupeng
+ */
+declare const _default: {
+    highLightModule: {
+        selectLang: string;
+    };
+};
+export default _default;

package/dist/code-highlight/src/module/elem-to-html.d.ts

@@ -0,0 +1,11 @@
+/**
+ * @description to html
+ * @author wangfupeng
+ */
+import { Element } from 'slate';
+declare function codeToHtml(elem: Element, childrenHtml: string): string;
+export declare const codeToHtmlConf: {
+    type: string;
+    elemToHtml: typeof codeToHtml;
+};
+export {};

package/dist/code-highlight/src/module/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * @description code highlight module
+ * @author wangfupeng
+ */
+import { IModuleConf } from '@mnykj/wangeditoroptimize-core';
+declare const codeHighlightModule: Partial<IModuleConf>;
+export default codeHighlightModule;

package/dist/code-highlight/src/module/menu/SelectLangMenu.d.ts

@@ -0,0 +1,23 @@
+/**
+ * @description code-highlight select lang
+ * @author wangfupeng
+ */
+import { ISelectMenu, IDomEditor, IOption } from '@mnykj/wangeditoroptimize-core';
+declare class SelectLangMenu implements ISelectMenu {
+    readonly title: string;
+    readonly iconSvg = "<svg viewBox=\"0 0 1024 1024\"><path d=\"M64 64v896h896V64H64z m487.6 698.8c0 87.2-51.2 127-125.8 127-67.4 0-106.4-34.8-126.4-77l68.6-41.4c13.2 23.4 25.2 43.2 54.2 43.2 27.6 0 45.2-10.8 45.2-53V475.4h84.2v287.4z m199.2 127c-78.2 0-128.8-37.2-153.4-86l68.6-39.6c18 29.4 41.6 51.2 83 51.2 34.8 0 57.2-17.4 57.2-41.6 0-28.8-22.8-39-61.4-56l-21-9c-60.8-25.8-101-58.4-101-127 0-63.2 48.2-111.2 123.2-111.2 53.6 0 92 18.6 119.6 67.4L800 580c-14.4-25.8-30-36-54.2-36-24.6 0-40.2 15.6-40.2 36 0 25.2 15.6 35.4 51.8 51.2l21 9c71.6 30.6 111.8 62 111.8 132.4 0 75.6-59.6 117.2-139.4 117.2z\"></path></svg>";
+    readonly tag = "select";
+    readonly width = 95;
+    readonly selectPanelWidth = 115;
+    getOptions(editor: IDomEditor): IOption[];
+    isActive(editor: IDomEditor): boolean;
+    /**
+     * 获取语言类型
+     * @param editor editor
+     */
+    getValue(editor: IDomEditor): string | boolean;
+    isDisabled(editor: IDomEditor): boolean;
+    exec(editor: IDomEditor, value: string | boolean): void;
+    private getSelectCodeElem;
+}
+export default SelectLangMenu;

package/dist/code-highlight/src/module/menu/config.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description menu config
+ * @author wangfupeng
+ */
+export declare function genCodeLangs(): {
+    text: string;
+    value: string;
+}[];

package/dist/code-highlight/src/module/menu/index.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description code-highlight menu
+ * @author wangfupeng
+ */
+import SelectLangMenu from './SelectLangMenu';
+export declare const selectLangMenuConf: {
+    key: string;
+    factory(): SelectLangMenu;
+    config: {
+        codeLangs: {
+            text: string;
+            value: string;
+        }[];
+    };
+};

package/dist/code-highlight/src/module/parse-style-html.d.ts

@@ -0,0 +1,8 @@
+/**
+ * @description parse style html
+ * @author wangfupeng
+ */
+import { DOMElement } from '../utils/dom';
+import { Descendant } from 'slate';
+import { IDomEditor } from '@mnykj/wangeditoroptimize-core';
+export declare function parseCodeStyleHtml(elem: DOMElement, node: Descendant, editor: IDomEditor): Descendant;

package/dist/code-highlight/src/module/render-style.d.ts

@@ -0,0 +1,13 @@
+/**
+ * @description render code highlight style
+ * @author wangfupeng
+ */
+import { Descendant } from 'slate';
+import { VNode } from 'snabbdom';
+/**
+ * 添加样式
+ * @param node slate text
+ * @param vnode vnode
+ * @returns vnode
+ */
+export declare function renderStyle(node: Descendant, vnode: VNode): VNode;

package/dist/code-highlight/src/utils/dom.d.ts

@@ -0,0 +1,15 @@
+/**
+ * @description DOM 操作
+ * @author wangfupeng
+ */
+import $ from 'dom7';
+export { Dom7Array } from 'dom7';
+export default $;
+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/code-highlight/src/utils/vdom.d.ts

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

package/dist/code-highlight/src/vendor/prism.d.ts

@@ -0,0 +1,36 @@
+/**
+ * @description prismjs
+ * @author wangfupeng
+ */
+import { Text } from 'slate';
+import Prism from 'prismjs';
+import 'prismjs/components/prism-jsx';
+import 'prismjs/components/prism-typescript';
+import 'prismjs/components/prism-markup';
+import 'prismjs/components/prism-go';
+import 'prismjs/components/prism-php';
+import 'prismjs/components/prism-c';
+import 'prismjs/components/prism-python';
+import 'prismjs/components/prism-java';
+import 'prismjs/components/prism-cpp';
+import 'prismjs/components/prism-csharp';
+import 'prismjs/components/prism-visual-basic';
+import 'prismjs/components/prism-sql';
+import 'prismjs/components/prism-ruby';
+import 'prismjs/components/prism-swift';
+import 'prismjs/components/prism-bash';
+import 'prismjs/components/prism-markdown';
+import 'prismjs/components/prism-lua';
+import 'prismjs/components/prism-groovy';
+export declare const prismTokenTypes: string[];
+/**
+ * 获取 prism token 的字符串长度
+ * @param token prism token
+ */
+export declare function getPrismTokenLength(token: any): any;
+/**
+ * 获取 prism 解析的 token 列表
+ * @param textNode text node
+ * @param language 代码语言
+ */
+export declare function getPrismTokens(textNode: Text, language: string): (string | Prism.Token)[];

package/dist/css/style.css

@@ -0,0 +1 @@
+.w-e-text-container [data-slate-editor] pre>code{word-wrap:normal;font-family:Consolas,Monaco,Andale Mono,Ubuntu Mono,monospace;-webkit-hyphens:none;hyphens:none;line-height:1.5;margin:.5em 0;overflow:auto;padding:1em;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px #fff;white-space:pre;word-break:normal;word-spacing:normal}.w-e-text-container [data-slate-editor] pre>code .token.cdata,.w-e-text-container [data-slate-editor] pre>code .token.comment,.w-e-text-container [data-slate-editor] pre>code .token.doctype,.w-e-text-container [data-slate-editor] pre>code .token.prolog{color:#708090}.w-e-text-container [data-slate-editor] pre>code .token.punctuation{color:#999}.w-e-text-container [data-slate-editor] pre>code .token.namespace{opacity:.7}.w-e-text-container [data-slate-editor] pre>code .token.boolean,.w-e-text-container [data-slate-editor] pre>code .token.constant,.w-e-text-container [data-slate-editor] pre>code .token.deleted,.w-e-text-container [data-slate-editor] pre>code .token.number,.w-e-text-container [data-slate-editor] pre>code .token.property,.w-e-text-container [data-slate-editor] pre>code .token.symbol,.w-e-text-container [data-slate-editor] pre>code .token.tag{color:#905}.w-e-text-container [data-slate-editor] pre>code .token.attr-name,.w-e-text-container [data-slate-editor] pre>code .token.builtin,.w-e-text-container [data-slate-editor] pre>code .token.char,.w-e-text-container [data-slate-editor] pre>code .token.inserted,.w-e-text-container [data-slate-editor] pre>code .token.selector,.w-e-text-container [data-slate-editor] pre>code .token.string{color:#690}.w-e-text-container [data-slate-editor] pre>code .language-css .token.string,.w-e-text-container [data-slate-editor] pre>code .style .token.string,.w-e-text-container [data-slate-editor] pre>code .token.entity,.w-e-text-container [data-slate-editor] pre>code .token.operator,.w-e-text-container [data-slate-editor] pre>code .token.url{color:#9a6e3a}.w-e-text-container [data-slate-editor] pre>code .token.atrule,.w-e-text-container [data-slate-editor] pre>code .token.attr-value,.w-e-text-container [data-slate-editor] pre>code .token.keyword{color:#07a}.w-e-text-container [data-slate-editor] pre>code .token.class-name,.w-e-text-container [data-slate-editor] pre>code .token.function{color:#dd4a68}.w-e-text-container [data-slate-editor] pre>code .token.important,.w-e-text-container [data-slate-editor] pre>code .token.regex,.w-e-text-container [data-slate-editor] pre>code .token.variable{color:#e90}.w-e-text-container [data-slate-editor] pre>code .token.bold,.w-e-text-container [data-slate-editor] pre>code .token.important{font-weight:700}.w-e-text-container [data-slate-editor] pre>code .token.italic{font-style:italic}.w-e-text-container [data-slate-editor] pre>code .token.entity{cursor:help}