@8btc/mditor 0.0.1

package/src/ts/util/Options.ts

@@ -0,0 +1,458 @@
+import { Constants } from "../constants";
+import { merge } from "./merge";
+
+export class Options {
+    public options: IOptions;
+    private defaultOptions: IOptions = {
+        rtl: false,
+        after: undefined,
+        inlinePopover: {
+            enable: false,
+        },
+        cache: {
+            enable: true,
+        },
+        cdn: Constants.CDN,
+        classes: {
+            preview: "",
+        },
+        comment: {
+            enable: false,
+        },
+        counter: {
+            enable: false,
+            type: "markdown",
+        },
+        customRenders: [],
+        debugger: false,
+        fullscreen: {
+            index: 90,
+        },
+        height: "auto",
+        hint: {
+            delay: 200,
+            emoji: {
+                "+1": "👍",
+                "-1": "👎",
+                confused: "😕",
+                eyes: "👀️",
+                heart: "❤️",
+                rocket: "🚀️",
+                smile: "😄",
+                tada: "🎉️",
+            },
+            emojiPath: `${Constants.CDN}/dist/images/emoji`,
+            extend: [],
+            parse: true,
+        },
+        icon: "ant",
+        lang: "zh_CN",
+        mode: "ir",
+        outline: {
+            enable: false,
+            position: "left",
+        },
+        placeholder: "",
+        preview: {
+            delay: 1000,
+            hljs: Constants.HLJS_OPTIONS,
+            markdown: Constants.MARKDOWN_OPTIONS,
+            math: Constants.MATH_OPTIONS,
+            maxWidth: 800,
+            mode: "both",
+            theme: Constants.THEME_OPTIONS,
+            render: {
+                media: {
+                    enable: true,
+                },
+            },
+        },
+        link: {
+            isOpen: true,
+        },
+        image: {
+            isPreview: true,
+        },
+        resize: {
+            enable: false,
+            position: "bottom",
+        },
+        theme: "classic",
+        toolbar: [
+            "emoji",
+            "headings",
+            "bold",
+            "italic",
+            "strike",
+            "link",
+            "|",
+            "list",
+            "ordered-list",
+            "check",
+            "outdent",
+            "indent",
+            "|",
+            "quote",
+            "line",
+            "code",
+            "inline-code",
+            "insert-before",
+            "insert-after",
+            "|",
+            "upload",
+            "record",
+            "table",
+            "|",
+            "undo",
+            "redo",
+            "|",
+            "fullscreen",
+            "edit-mode",
+            {
+                name: "more",
+                toolbar: ["both", "outline", "preview"],
+            },
+        ],
+        toolbarConfig: {
+            hide: false,
+            pin: false,
+        },
+        typewriterMode: false,
+        lineNumber: false,
+        undoDelay: 800,
+        upload: {
+            extraData: {},
+            fieldName: "file[]",
+            filename: (name: string) => name.replace(/\W/g, ""),
+            linkToImgUrl: "",
+            max: 10 * 1024 * 1024,
+            multiple: true,
+            url: "",
+            withCredentials: false,
+        },
+        value: "",
+        width: "auto",
+    };
+
+    /**
+     * 构造函数：保存外部传入的配置对象
+     * @param options 外部传入的 IOptions
+     */
+    constructor(options: IOptions) {
+        this.options = options;
+    }
+
+    /**
+     * 合并用户配置与默认配置，返回最终配置
+     * - 处理 toolbar、preview 主题列表、媒体渲染开关等
+     */
+    public merge(): IOptions {
+        if (this.options) {
+            if (this.options.toolbar) {
+                this.options.toolbar = this.mergeToolbar(this.options.toolbar);
+            } else {
+                this.options.toolbar = this.mergeToolbar(
+                    this.defaultOptions.toolbar
+                );
+            }
+            if (this.options.preview?.theme?.list) {
+                this.defaultOptions.preview.theme.list =
+                    this.options.preview.theme.list;
+            }
+            if (this.options.preview?.render?.media?.enable) {
+                this.defaultOptions.preview.render.media.enable =
+                    this.options.preview.render.media.enable;
+            }
+            if (this.options.hint?.emoji) {
+                this.defaultOptions.hint.emoji = this.options.hint.emoji;
+            }
+            if (this.options.comment) {
+                this.defaultOptions.comment = this.options.comment;
+            }
+
+            if (this.options.cdn) {
+                if (!this.options.preview?.theme?.path) {
+                    this.defaultOptions.preview.theme.path = `${this.options.cdn}/dist/css/content-theme`;
+                }
+                if (!this.options.hint?.emojiPath) {
+                    this.defaultOptions.hint.emojiPath = `${this.options.cdn}/dist/images/emoji`;
+                }
+            }
+        }
+
+        const mergedOptions = merge(this.defaultOptions, this.options);
+
+        if (mergedOptions.cache.enable && !mergedOptions.cache.id) {
+            throw new Error(
+                "need options.cache.id, see https://ld246.com/article/1549638745630#options"
+            );
+        }
+
+        return mergedOptions;
+    }
+
+    /**
+     * 合并工具栏配置，统一为 IMenuItem 数组
+     * @param toolbar 工具栏项目集合
+     */
+    private mergeToolbar(toolbar: Array<string | IMenuItem>) {
+        const toolbarItem = [
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-export"></use></svg>',
+                name: "export",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘E",
+                icon: '<svg><use xlink:href="#vditor-icon-emoji"></use></svg>',
+                name: "emoji",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘H",
+                icon: '<svg><use xlink:href="#vditor-icon-headings"></use></svg>',
+                name: "headings",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘B",
+                icon: '<svg><use xlink:href="#vditor-icon-bold"></use></svg>',
+                name: "bold",
+                prefix: "**",
+                suffix: "**",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘I",
+                icon: '<svg><use xlink:href="#vditor-icon-italic"></use></svg>',
+                name: "italic",
+                prefix: "*",
+                suffix: "*",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘D",
+                icon: '<svg><use xlink:href="#vditor-icon-strike"></use></svg>',
+                name: "strike",
+                prefix: "~~",
+                suffix: "~~",
+                tipPosition: "ne",
+            },
+            {
+                hotkey: "⌘K",
+                icon: '<svg><use xlink:href="#vditor-icon-link"></use></svg>',
+                name: "link",
+                prefix: "[",
+                suffix: "](https://)",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                hotkey: "⌘L",
+                icon: '<svg><use xlink:href="#vditor-icon-list"></use></svg>',
+                name: "list",
+                prefix: "* ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘O",
+                icon: '<svg><use xlink:href="#vditor-icon-ordered-list"></use></svg>',
+                name: "ordered-list",
+                prefix: "1. ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘J",
+                icon: '<svg><use xlink:href="#vditor-icon-check"></use></svg>',
+                name: "check",
+                prefix: "* [ ] ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘I",
+                icon: '<svg><use xlink:href="#vditor-icon-outdent"></use></svg>',
+                name: "outdent",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘O",
+                icon: '<svg><use xlink:href="#vditor-icon-indent"></use></svg>',
+                name: "indent",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                hotkey: "⌘;",
+                icon: '<svg><use xlink:href="#vditor-icon-quote"></use></svg>',
+                name: "quote",
+                prefix: "> ",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘H",
+                icon: '<svg><use xlink:href="#vditor-icon-line"></use></svg>',
+                name: "line",
+                prefix: "---",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘U",
+                icon: '<svg><use xlink:href="#vditor-icon-code"></use></svg>',
+                name: "code",
+                prefix: "```",
+                suffix: "\n```",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘G",
+                icon: '<svg><use xlink:href="#vditor-icon-inline-code"></use></svg>',
+                name: "inline-code",
+                prefix: "`",
+                suffix: "`",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘B",
+                icon: '<svg><use xlink:href="#vditor-icon-before"></use></svg>',
+                name: "insert-before",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⇧⌘E",
+                icon: '<svg><use xlink:href="#vditor-icon-after"></use></svg>',
+                name: "insert-after",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-upload"></use></svg>',
+                name: "upload",
+                tipPosition: "n",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-record"></use></svg>',
+                name: "record",
+                tipPosition: "n",
+            },
+            {
+                hotkey: "⌘M",
+                icon: '<svg><use xlink:href="#vditor-icon-table"></use></svg>',
+                name: "table",
+                prefix: "| col1",
+                suffix: " | col2 | col3 |\n| --- | --- | --- |\n|  |  |  |\n|  |  |  |",
+                tipPosition: "n",
+            },
+            {
+                name: "|",
+            },
+            {
+                hotkey: "⌘Z",
+                icon: '<svg><use xlink:href="#vditor-icon-undo"></use></svg>',
+                name: "undo",
+                tipPosition: "nw",
+            },
+            {
+                hotkey: "⌘Y",
+                icon: '<svg><use xlink:href="#vditor-icon-redo"></use></svg>',
+                name: "redo",
+                tipPosition: "nw",
+            },
+            {
+                name: "|",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-more"></use></svg>',
+                name: "more",
+                tipPosition: "e",
+            },
+            {
+                hotkey: "⌘'",
+                icon: '<svg><use xlink:href="#vditor-icon-fullscreen"></use></svg>',
+                name: "fullscreen",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-edit"></use></svg>',
+                name: "edit-mode",
+                tipPosition: "nw",
+            },
+            {
+                hotkey: "⌘P",
+                icon: '<svg><use xlink:href="#vditor-icon-both"></use></svg>',
+                name: "both",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-preview"></use></svg>',
+                name: "preview",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-align-center"></use></svg>',
+                name: "outline",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-theme"></use></svg>',
+                name: "content-theme",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-code-theme"></use></svg>',
+                name: "code-theme",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-bug"></use></svg>',
+                name: "devtools",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-info"></use></svg>',
+                name: "info",
+                tipPosition: "nw",
+            },
+            {
+                icon: '<svg><use xlink:href="#vditor-icon-help"></use></svg>',
+                name: "help",
+                tipPosition: "nw",
+            },
+            {
+                name: "br",
+            },
+        ];
+        const toolbarResult: IMenuItem[] = [];
+        toolbar.forEach((menuItem: IMenuItem) => {
+            let currentMenuItem = menuItem;
+            toolbarItem.forEach((defaultMenuItem: IMenuItem) => {
+                if (
+                    typeof menuItem === "string" &&
+                    defaultMenuItem.name === menuItem
+                ) {
+                    currentMenuItem = defaultMenuItem;
+                }
+                if (
+                    typeof menuItem === "object" &&
+                    defaultMenuItem.name === menuItem.name
+                ) {
+                    currentMenuItem = Object.assign(
+                        {},
+                        defaultMenuItem,
+                        menuItem
+                    );
+                }
+            });
+            if (menuItem.toolbar) {
+                currentMenuItem.toolbar = this.mergeToolbar(menuItem.toolbar);
+            }
+            toolbarResult.push(currentMenuItem);
+        });
+        return toolbarResult;
+    }
+}

package/src/ts/util/RecordMedia.ts

@@ -0,0 +1,170 @@
+export class RecordMedia {
+    public SAMPLE_RATE = 5000;  // 44100 suggested by demos;
+    public DEFAULT_SAMPLE_RATE: number;
+    public isRecording = false;
+    public readyFlag = false;
+    public leftChannel: Float32List[] = [];
+    public rightChannel: Float32List[] = [];
+    public recordingLength = 0;
+    // This needs to be public so the 'onaudioprocess' event handler can be defined externally.
+    public recorder: ScriptProcessorNode;
+
+    constructor(e: MediaStream) {
+        let context;
+        // creates the audio context
+        if (typeof AudioContext !== "undefined") {
+            context = new AudioContext();
+        } else if (webkitAudioContext) {
+            context = new webkitAudioContext();
+        } else {
+            return;
+        }
+
+        this.DEFAULT_SAMPLE_RATE = context.sampleRate;
+
+        // creates a gain node
+        const volume = context.createGain();
+
+        // creates an audio node from the microphone incoming stream
+        const audioInput = context.createMediaStreamSource(e);
+
+        // connect the stream to the gain node
+        audioInput.connect(volume);
+
+        /* From the spec: The size of the buffer controls how frequently the audioprocess event is
+         dispatched and how many sample-frames need to be processed each call.
+         Lower values for buffer size will result in a lower (better) latency.
+         Higher values will be necessary to avoid audio breakup and glitches */
+        this.recorder = context.createScriptProcessor(2048, 2, 1);
+
+        // The onaudioprocess event needs to be defined externally, so make sure it is not set:
+        this.recorder.onaudioprocess = null;
+
+        // we connect the recorder
+        volume.connect(this.recorder);
+        this.recorder.connect(context.destination);
+        this.readyFlag = true;
+    }
+
+    // Publicly accessible methods:
+    public cloneChannelData(leftChannelData: Float32List, rightChannelData: Float32List) {
+        this.leftChannel.push(new Float32Array(leftChannelData));
+        this.rightChannel.push(new Float32Array(rightChannelData));
+        this.recordingLength += 2048;
+    }
+
+    public startRecordingNewWavFile() {
+        if (this.readyFlag) {
+            this.isRecording = true;
+            this.leftChannel.length = this.rightChannel.length = 0;
+            this.recordingLength = 0;
+        }
+    }
+
+    public stopRecording() {
+        this.isRecording = false;
+    }
+
+    public buildWavFileBlob() {
+        // we flat the left and right channels down
+        const leftBuffer = this.mergeBuffers(this.leftChannel);
+        const rightBuffer = this.mergeBuffers(this.rightChannel);
+
+        // Interleave the left and right channels together:
+        let interleaved: Float32Array = new Float32Array(leftBuffer.length);
+
+        for (let i = 0; i < leftBuffer.length; ++i) {
+            interleaved[i] = 0.5 * (leftBuffer[i] + rightBuffer[i]);
+        }
+
+        // Downsample the audio data if necessary:
+        if (this.DEFAULT_SAMPLE_RATE > this.SAMPLE_RATE) {
+            interleaved = this.downSampleBuffer(interleaved, this.SAMPLE_RATE);
+        }
+
+        const totalByteCount = (44 + interleaved.length * 2);
+        const buffer = new ArrayBuffer(totalByteCount);
+        const view = new DataView(buffer);
+
+        // Build the RIFF chunk descriptor:
+        this.writeUTFBytes(view, 0, "RIFF");
+        view.setUint32(4, totalByteCount, true);
+        this.writeUTFBytes(view, 8, "WAVE");
+
+        // Build the FMT sub-chunk:
+        this.writeUTFBytes(view, 12, "fmt "); // subchunk1 ID is format
+        view.setUint32(16, 16, true); // The sub-chunk size is 16.
+        view.setUint16(20, 1, true); // The audio format is 1.
+        view.setUint16(22, 1, true); // Number of interleaved channels.
+        view.setUint32(24, this.SAMPLE_RATE, true); // Sample rate.
+        view.setUint32(28, this.SAMPLE_RATE * 2, true); // Byte rate.
+        view.setUint16(32, 2, true); // Block align
+        view.setUint16(34, 16, true); // Bits per sample.
+
+        // Build the data sub-chunk:
+        const subChunk2ByteCount = interleaved.length * 2;
+        this.writeUTFBytes(view, 36, "data");
+        view.setUint32(40, subChunk2ByteCount, true);
+
+        // Write the PCM samples to the view:
+        const lng = interleaved.length;
+        let index = 44;
+        const volume = 1;
+        for (let j = 0; j < lng; j++) {
+            view.setInt16(index, interleaved[j] * (0x7FFF * volume), true);
+            index += 2;
+        }
+
+        return new Blob([view], {type: "audio/wav"});
+    }
+
+    private downSampleBuffer(buffer: Float32Array, rate: number) {
+        if (rate === this.DEFAULT_SAMPLE_RATE) {
+            return buffer;
+        }
+
+        if (rate > this.DEFAULT_SAMPLE_RATE) {
+            // throw "downsampling rate show be smaller than original sample rate";
+            return buffer;
+        }
+
+        const sampleRateRatio = this.DEFAULT_SAMPLE_RATE / rate;
+        const newLength = Math.round(buffer.length / sampleRateRatio);
+        const result = new Float32Array(newLength);
+        let offsetResult = 0;
+        let offsetBuffer = 0;
+
+        while (offsetResult < result.length) {
+            const nextOffsetBuffer = Math.round((offsetResult + 1) * sampleRateRatio);
+            let accum = 0;
+            let count = 0;
+            for (let i = offsetBuffer; i < nextOffsetBuffer && i < buffer.length; i++) {
+                accum += buffer[i];
+                count++;
+            }
+            result[offsetResult] = accum / count;
+            offsetResult++;
+            offsetBuffer = nextOffsetBuffer;
+        }
+        return result;
+    }
+
+    private mergeBuffers(desiredChannelBuffer: Float32List[]) {
+        const result = new Float32Array(this.recordingLength);
+        let offset = 0;
+        const lng = desiredChannelBuffer.length;
+        for (let i = 0; i < lng; ++i) {
+            const buffer = desiredChannelBuffer[i];
+            result.set(buffer, offset);
+            offset += buffer.length;
+        }
+        return result;
+    }
+
+    private writeUTFBytes(view: DataView, offset: number, value: string) {
+        const lng = value.length;
+        for (let i = 0; i < lng; i++) {
+            view.setUint8(offset + i, value.charCodeAt(i));
+        }
+    }
+}

package/src/ts/util/addScript.ts

@@ -0,0 +1,43 @@
+export const addScriptSync = (path: string, id: string) => {
+    if (document.getElementById(id)) {
+        return false;
+    }
+    const xhrObj = new XMLHttpRequest();
+    xhrObj.open("GET", path, false);
+    xhrObj.setRequestHeader("Accept",
+        "text/javascript, application/javascript, application/ecmascript, application/x-ecmascript, */*; q=0.01");
+    xhrObj.send("");
+    const scriptElement = document.createElement("script");
+    scriptElement.type = "text/javascript";
+    scriptElement.text = xhrObj.responseText;
+    scriptElement.id = id;
+    document.head.appendChild(scriptElement);
+};
+
+export const addScript = (path: string, id: string) => {
+    return new Promise((resolve, reject) => {
+        if (document.getElementById(id)) {
+            // 脚本加载后再次调用直接返回
+            resolve(true);
+            return false;
+        }
+        const scriptElement = document.createElement("script");
+        scriptElement.src = path;
+        scriptElement.async = true;
+        // 循环调用时 Chrome 不会重复请求 js
+        document.head.appendChild(scriptElement);
+        scriptElement.onerror = (event) => {
+            reject(event);
+        }
+        scriptElement.onload = () => {
+            if (document.getElementById(id)) {
+                // 循环调用需清除 DOM 中的 script 标签
+                scriptElement.remove();
+                resolve(true);
+                return false;
+            }
+            scriptElement.id = id;
+            resolve(true);
+        };
+    });
+};

package/src/ts/util/addStyle.ts

@@ -0,0 +1,10 @@
+export const addStyle = (url: string, id: string) => {
+    if (!document.getElementById(id)) {
+        const styleElement = document.createElement("link");
+        styleElement.id = id;
+        styleElement.rel = "stylesheet";
+        styleElement.type = "text/css";
+        styleElement.href = url;
+        document.getElementsByTagName("head")[0].appendChild(styleElement);
+    }
+};

package/src/ts/util/code160to32.ts

@@ -0,0 +1,4 @@
+export const code160to32 = (text: string) => {
+    // 非打断空格转换为空格
+    return text.replace(/\u00a0/g, " ");
+};