From 28c818a8fbeeec3222c12f6c76243c90313e1f8a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=BB=84=E4=BA=91=E9=A3=9E?= Date: Fri, 18 Feb 2022 15:47:06 +0800 Subject: [PATCH] feat:add codeblock --- index.html | 3 + package.json | 4 ++ src/assets/images/codeblock.svg | 1 + src/components/dialog/Dialog.ts | 29 +++++++-- src/components/dialog/dialog.css | 9 +-- src/editor/core/command/Command.ts | 7 ++ src/editor/core/command/CommandAdapt.ts | 20 ++++++ src/editor/utils/element.ts | 4 +- src/main.ts | 49 ++++++++++++++ src/style.css | 4 ++ src/utils/prism.ts | 87 +++++++++++++++++++++++++ yarn.lock | 10 +++ 12 files changed, 214 insertions(+), 13 deletions(-) create mode 100644 src/assets/images/codeblock.svg create mode 100644 src/utils/prism.ts diff --git a/index.html b/index.html index e687f0a..2acc94c 100644 --- a/index.html +++ b/index.html @@ -154,6 +154,9 @@ +
+ +
diff --git a/package.json b/package.json index afe8634..3af51d4 100644 --- a/package.json +++ b/package.json @@ -8,7 +8,11 @@ }, "devDependencies": { "@types/node": "^16.11.12", + "@types/prismjs": "^1.26.0", "typescript": "^4.3.2", "vite": "^2.4.2" + }, + "dependencies": { + "prismjs": "^1.27.0" } } \ No newline at end of file diff --git a/src/assets/images/codeblock.svg b/src/assets/images/codeblock.svg new file mode 100644 index 0000000..6c3163c --- /dev/null +++ b/src/assets/images/codeblock.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/src/components/dialog/Dialog.ts b/src/components/dialog/Dialog.ts index 3778a42..6b27572 100644 --- a/src/components/dialog/Dialog.ts +++ b/src/components/dialog/Dialog.ts @@ -3,10 +3,12 @@ import './dialog.css' export interface IDialogData { type: string; - label: string; + label?: string; name: string; value?: string; placeholder?: string; + width?: number; + height?: number; } export interface IDialogConfirm { @@ -27,7 +29,7 @@ export class Dialog { private options: IDialogOptions private mask: HTMLDivElement | null private container: HTMLDivElement | null - private inputList: HTMLInputElement[] + private inputList: (HTMLInputElement | HTMLTextAreaElement)[] constructor(options: IDialogOptions) { this.options = options @@ -77,12 +79,25 @@ export class Dialog { const optionItemContainer = document.createElement('div') optionItemContainer.classList.add('dialog-option__item') // 选项名称 - const optionName = document.createElement('span') - optionName.append(document.createTextNode(option.label)) - optionItemContainer.append(optionName) + if (option.label) { + const optionName = document.createElement('span') + optionName.append(document.createTextNode(option.label)) + optionItemContainer.append(optionName) + } // 选项输入框 - const optionInput = document.createElement('input') - optionInput.type = option.type + let optionInput: HTMLInputElement | HTMLTextAreaElement + if (option.type === 'textarea') { + optionInput = document.createElement('textarea') + } else { + optionInput = document.createElement('input') + optionInput.type = option.type + } + if (option.width) { + optionInput.style.width = `${option.width}px` + } + if (option.height) { + optionInput.style.height = `${option.height}px` + } optionInput.name = option.name optionInput.value = option.value || '' optionInput.placeholder = option.placeholder || '' diff --git a/src/components/dialog/dialog.css b/src/components/dialog/dialog.css index ec7d546..8fef1fe 100644 --- a/src/components/dialog/dialog.css +++ b/src/components/dialog/dialog.css @@ -52,7 +52,6 @@ .dialog-option__item { margin-bottom: 18px; - height: 30px; display: flex; align-items: center; justify-content: space-between; @@ -64,21 +63,23 @@ color: #3d4757; } -.dialog-option__item input { +.dialog-option__item input, +.dialog-option__item textarea { width: 276px; height: 30px; border-radius: 2px; border: 1px solid #d3d3d3; min-height: 30px; - line-height: 17px; padding: 5px; box-sizing: border-box; outline: none; appearance: none; user-select: none; + font-family: inherit; } -.dialog-option__item input:focus { +.dialog-option__item input:focus, +.dialog-option__item textarea:focus { border-color: #4991f2; } diff --git a/src/editor/core/command/Command.ts b/src/editor/core/command/Command.ts index e65d609..43806af 100644 --- a/src/editor/core/command/Command.ts +++ b/src/editor/core/command/Command.ts @@ -49,6 +49,7 @@ export class Command { private static pageScaleRecovery: Function private static pageScaleMinus: Function private static pageScaleAdd: Function + private static insertElementList: Function constructor(adapt: CommandAdapt) { Command.cut = adapt.cut.bind(adapt) @@ -94,6 +95,7 @@ export class Command { Command.pageScaleRecovery = adapt.pageScaleRecovery.bind(adapt) Command.pageScaleMinus = adapt.pageScaleMinus.bind(adapt) Command.pageScaleAdd = adapt.pageScaleAdd.bind(adapt) + Command.insertElementList = adapt.insertElementList.bind(adapt) } // 全局命令 @@ -273,4 +275,9 @@ export class Command { return Command.pageScaleAdd() } + // 通用 + public executeInsertElementList(payload: IElement[]) { + return Command.insertElementList(payload) + } + } \ No newline at end of file diff --git a/src/editor/core/command/CommandAdapt.ts b/src/editor/core/command/CommandAdapt.ts index cc61934..7f599df 100644 --- a/src/editor/core/command/CommandAdapt.ts +++ b/src/editor/core/command/CommandAdapt.ts @@ -1094,4 +1094,24 @@ export class CommandAdapt { } } + public insertElementList(payload: IElement[]) { + if (!payload.length) return + const { startIndex, endIndex } = this.range.getRange() + if (!~startIndex && !~endIndex) return + // 格式化element + formatElementList(payload, false) + const elementList = this.draw.getElementList() + const isCollapsed = startIndex === endIndex + let start = startIndex + 1 + if (!isCollapsed) { + elementList.splice(start, endIndex - startIndex) + } + for (let i = 0; i < payload.length; i++) { + elementList.splice(start + i, 0, payload[i]) + } + const curIndex = startIndex + payload.length + this.range.setRange(curIndex, curIndex) + this.draw.render({ curIndex }) + } + } \ No newline at end of file diff --git a/src/editor/utils/element.ts b/src/editor/utils/element.ts index 3868bbb..9e5b37e 100644 --- a/src/editor/utils/element.ts +++ b/src/editor/utils/element.ts @@ -3,8 +3,8 @@ import { ElementType, IElement } from ".." import { ZERO } from "../dataset/constant/Common" import { EDITOR_ELEMENT_ZIP_ATTR } from "../dataset/constant/Element" -export function formatElementList(elementList: IElement[]) { - if (elementList[0]?.value !== ZERO) { +export function formatElementList(elementList: IElement[], isHandleFirstElement = true) { + if (isHandleFirstElement && elementList[0]?.value !== ZERO) { elementList.unshift({ value: ZERO }) diff --git a/src/main.ts b/src/main.ts index 9297fc5..53b38d5 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,6 +1,8 @@ import './style.css' +import prism from "prismjs" import Editor, { ElementType, IElement, RowFlex } from './editor' import { Dialog } from './components/dialog/Dialog' +import { formatPrismToken } from './utils/prism' window.onload = function () { @@ -533,6 +535,53 @@ window.onload = function () { instance.command.executeDeleteWatermark() } } + + const codeblockDom = document.querySelector('.menu-item__codeblock')! + codeblockDom.onclick = function () { + console.log('codeblock') + new Dialog({ + title: '代码块', + data: [{ + type: 'textarea', + name: 'codeblock', + placeholder: '请输入代码', + width: 500, + height: 300 + }], + onConfirm: (payload) => { + const codeblock = payload.find(p => p.name === 'codeblock')?.value + if (!codeblock) return + const tokenList = prism.tokenize(codeblock, prism.languages.javascript) + const formatTokenList = formatPrismToken(tokenList) + const elementList: IElement[] = [] + for (let i = 0; i < formatTokenList.length; i++) { + const formatToken = formatTokenList[i] + const tokenStringList = formatToken.content.split('') + for (let j = 0; j < tokenStringList.length; j++) { + const value = tokenStringList[j] + const element: IElement = { + value + } + if (formatToken.color) { + element.color = formatToken.color + } + if (formatToken.bold) { + element.bold = true + } + if (formatToken.italic) { + element.italic = true + } + elementList.push(element) + } + } + elementList.unshift({ + value: '\n' + }) + instance.command.executeInsertElementList(elementList) + } + }) + } + const searchCollapseDom = document.querySelector('.menu-item__search__collapse') const searchInputDom = document.querySelector('.menu-item__search__collapse__search input') document.querySelector('.menu-item__search')!.onclick = function () { diff --git a/src/style.css b/src/style.css index 9d0b76e..62fa1d9 100644 --- a/src/style.css +++ b/src/style.css @@ -421,6 +421,10 @@ ul { position: relative; } +.menu-item__codeblock i { + background-image: url('./assets/images/codeblock.svg'); +} + .menu-item__search { position: relative; } diff --git a/src/utils/prism.ts b/src/utils/prism.ts new file mode 100644 index 0000000..789cca3 --- /dev/null +++ b/src/utils/prism.ts @@ -0,0 +1,87 @@ +interface IPrismKindStyle { + color?: string; + italic?: boolean; + opacity?: number; + bold?: boolean; +} + +export function getPrismKindStyle(payload: string): IPrismKindStyle | null { + switch (payload) { + case "comment": + case "prolog": + case "doctype": + case "cdata": + return { color: "#008000", italic: true } + case "namespace": + return { opacity: 0.7 } + case "string": + return { color: "#A31515" } + case "punctuation": + case "operator": + return { color: "#393A34" } + case "url": + case "symbol": + case "number": + case "boolean": + case "variable": + case "constant": + case "inserted": + return { color: "#36acaa" } + case "atrule": + case "keyword": + case "attr-value": + return { color: "#0000ff" } + case "function": + return { color: "#b9a40a" } + case "deleted": + case "tag": + return { color: "#9a050f" } + case "selector": + return { color: "#00009f" } + case "important": + return { color: "#e90", bold: true } + case "italic": + return { italic: true } + case "class-name": + case "property": + return { color: "#2B91AF" } + case "attr-name": + case "regex": + case "entity": + return { color: "#ff0000" } + default: + return null + } +} + +type IFormatPrismToken = { + type?: string; + content: string; +} & IPrismKindStyle + +export function formatPrismToken(payload: (Prism.Token | string)[]): IFormatPrismToken[] { + const formatTokenList: IFormatPrismToken[] = [] + function format(tokenList: (Prism.Token | string)[]) { + for (let i = 0; i < tokenList.length; i++) { + const element = tokenList[i] + if (typeof element === 'string') { + formatTokenList.push({ + content: element + }) + } else if (Array.isArray(element.content)) { + format(element.content) + } else { + const { type, content } = element + if (typeof content === 'string') { + formatTokenList.push({ + type, + content, + ...getPrismKindStyle(type) + }) + } + } + } + } + format(payload) + return formatTokenList +} \ No newline at end of file diff --git a/yarn.lock b/yarn.lock index e77aca8..960f2c0 100644 --- a/yarn.lock +++ b/yarn.lock @@ -7,6 +7,11 @@ resolved "https://registry.yarnpkg.com/@types/node/-/node-16.11.12.tgz#ac7fb693ac587ee182c3780c26eb65546a1a3c10" integrity sha512-+2Iggwg7PxoO5Kyhvsq9VarmPbIelXP070HMImEpbtGCoyWNINQj4wzjbQCXzdHTRXnqufutJb5KAURZANNBAw== +"@types/prismjs@^1.26.0": + version "1.26.0" + resolved "https://registry.yarnpkg.com/@types/prismjs/-/prismjs-1.26.0.tgz#a1c3809b0ad61c62cac6d4e0c56d610c910b7654" + integrity sha512-ZTaqn/qSqUuAq1YwvOFQfVW1AR/oQJlLSZVustdjwI+GZ8kr0MSHBj0tsXPW1EqHubx50gtBEjbPGsdZwQwCjQ== + esbuild-android-arm64@0.13.13: version "0.13.13" resolved "https://registry.yarnpkg.com/esbuild-android-arm64/-/esbuild-android-arm64-0.13.13.tgz#da07b5fb2daf7d83dcd725f7cf58a6758e6e702a" @@ -163,6 +168,11 @@ postcss@^8.3.8: picocolors "^1.0.0" source-map-js "^0.6.2" +prismjs@^1.27.0: + version "1.27.0" + resolved "https://registry.yarnpkg.com/prismjs/-/prismjs-1.27.0.tgz#bb6ee3138a0b438a3653dd4d6ce0cc6510a45057" + integrity sha512-t13BGPUlFDR7wRB5kQDG4jjl7XeuH6jbJGt11JHPL96qwsEHNX2+68tFXqc1/k+/jALsbSWJKUOT/hcYAZ5LkA== + resolve@^1.20.0: version "1.20.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.20.0.tgz#629a013fb3f70755d6f0b7935cc1c2c5378b1975"