From 888e7a518e79bd68033d260281bce18402f8889b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 6 Feb 2021 12:52:34 +0100 Subject: [PATCH 1/4] refactoring --- docs/src/demos/Examples/Savvy/findColors.ts | 27 ++++++++++++--------- 1 file changed, 15 insertions(+), 12 deletions(-) diff --git a/docs/src/demos/Examples/Savvy/findColors.ts b/docs/src/demos/Examples/Savvy/findColors.ts index b4a196f4..0978598c 100644 --- a/docs/src/demos/Examples/Savvy/findColors.ts +++ b/docs/src/demos/Examples/Savvy/findColors.ts @@ -1,26 +1,29 @@ import { Decoration, DecorationSet } from 'prosemirror-view' import { Node } from 'prosemirror-model' -export default function (doc: Node) { +export default function (doc: Node): DecorationSet { const hexColor = /(#[0-9a-f]{3,6})\b/ig - const results: any[] = [] - const decorations: [any?] = [] + const results: { + color: string, + from: number, + to: number, + }[] = [] + const decorations: Decoration[] = [] - doc.descendants((node: any, position: any) => { - if (!node.isText) { + doc.descendants((node, position) => { + if (!node.text) { return } - let matches + [...node.text.matchAll(hexColor)].forEach(match => { + const index = match.index || 0 - // eslint-disable-next-line - while (matches = hexColor.exec(node.text)) { results.push({ - color: matches[0], - from: position + matches.index, - to: position + matches.index + matches[0].length, + color: match[0], + from: position + index, + to: position + index + match[0].length, }) - } + }) }) results.forEach(issue => { From 05be43ac543805d0cfd5b0e5c1f0a7ce33cf154e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 6 Feb 2021 12:54:48 +0100 Subject: [PATCH 2/4] refactoring --- docs/src/demos/Examples/Savvy/findColors.ts | 16 +++++++++------- 1 file changed, 9 insertions(+), 7 deletions(-) diff --git a/docs/src/demos/Examples/Savvy/findColors.ts b/docs/src/demos/Examples/Savvy/findColors.ts index 0978598c..69d36212 100644 --- a/docs/src/demos/Examples/Savvy/findColors.ts +++ b/docs/src/demos/Examples/Savvy/findColors.ts @@ -15,15 +15,17 @@ export default function (doc: Node): DecorationSet { return } - [...node.text.matchAll(hexColor)].forEach(match => { - const index = match.index || 0 + Array + .from(node.text.matchAll(hexColor)) + .forEach(match => { + const index = match.index || 0 - results.push({ - color: match[0], - from: position + index, - to: position + index + match[0].length, + results.push({ + color: match[0], + from: position + index, + to: position + index + match[0].length, + }) }) - }) }) results.forEach(issue => { From 9a65d5a7d6c81691d3625f1bef970b6827f5a580 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 6 Feb 2021 20:10:49 +0100 Subject: [PATCH 3/4] refactoring --- docs/src/demos/Examples/Savvy/findColors.ts | 25 +++++++-------------- 1 file changed, 8 insertions(+), 17 deletions(-) diff --git a/docs/src/demos/Examples/Savvy/findColors.ts b/docs/src/demos/Examples/Savvy/findColors.ts index 69d36212..48832ffa 100644 --- a/docs/src/demos/Examples/Savvy/findColors.ts +++ b/docs/src/demos/Examples/Savvy/findColors.ts @@ -3,11 +3,6 @@ import { Node } from 'prosemirror-model' export default function (doc: Node): DecorationSet { const hexColor = /(#[0-9a-f]{3,6})\b/ig - const results: { - color: string, - from: number, - to: number, - }[] = [] const decorations: Decoration[] = [] doc.descendants((node, position) => { @@ -18,21 +13,17 @@ export default function (doc: Node): DecorationSet { Array .from(node.text.matchAll(hexColor)) .forEach(match => { + const color = match[0] const index = match.index || 0 - - results.push({ - color: match[0], - from: position + index, - to: position + index + match[0].length, + const from = position + index + const to = position + index + match[0].length + const decoration = Decoration.inline(from, to, { + class: 'color', + style: `--color: ${color}`, }) - }) - }) - results.forEach(issue => { - decorations.push(Decoration.inline(issue.from, issue.to, { - class: 'color', - style: `--color: ${issue.color}`, - })) + decorations.push(decoration) + }) }) return DecorationSet.create(doc, decorations) From 297b06ca4283cd0112b0abdf535514994f5e3eaa Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Philipp=20Ku=CC=88hn?= Date: Sat, 6 Feb 2021 20:27:28 +0100 Subject: [PATCH 4/4] add demos page --- docs/gridsome.server.js | 24 +++++++++++++++++------- docs/src/templates/DemoPages/index.vue | 11 +++++++++++ docs/src/templates/DemoPages/style.scss | 8 ++++++++ 3 files changed, 36 insertions(+), 7 deletions(-) create mode 100644 docs/src/templates/DemoPages/index.vue create mode 100644 docs/src/templates/DemoPages/style.scss diff --git a/docs/gridsome.server.js b/docs/gridsome.server.js index cd983ad1..976c8bad 100644 --- a/docs/gridsome.server.js +++ b/docs/gridsome.server.js @@ -50,6 +50,8 @@ module.exports = function (api) { /** * Generate pages for all demo components for testing purposes */ + const demos = [] + globby.sync('./src/demos/**/index.(vue|jsx)').forEach(file => { const match = file.match( new RegExp(/\.\/src\/demos\/([\S]+)\/index.(vue|jsx)/i), @@ -59,14 +61,24 @@ module.exports = function (api) { return } - api.createPages(({ createPage }) => { + demos.push(match[1]) + }) + + api.createPages(({ createPage }) => { + createPage({ + path: '/demos', + component: './src/templates/DemoPages/index.vue', + context: { + demos, + }, + }) + + demos.forEach(name => { createPage({ - // path: '/demos/Extensions/CharacterCount' - path: `/demos/${match[1]}`, + path: `/demos/${name}`, component: './src/templates/DemoPage/index.vue', context: { - // name: 'Extensions/CharacterCount' - name: match[1], + name, }, }) }) @@ -116,9 +128,7 @@ module.exports = function (api) { const width = 1200 const height = 630 - const border = 40 - const canvas = createCanvas(width, height) const context = canvas.getContext('2d') diff --git a/docs/src/templates/DemoPages/index.vue b/docs/src/templates/DemoPages/index.vue new file mode 100644 index 00000000..9a233085 --- /dev/null +++ b/docs/src/templates/DemoPages/index.vue @@ -0,0 +1,11 @@ + + + diff --git a/docs/src/templates/DemoPages/style.scss b/docs/src/templates/DemoPages/style.scss new file mode 100644 index 00000000..14ac33ae --- /dev/null +++ b/docs/src/templates/DemoPages/style.scss @@ -0,0 +1,8 @@ +.demos-page { + padding: 1.25rem; + list-style: none; + + li { + margin: 0.5rem 0; + } +}