From 97b99e80adba46a3620350a7b5d032213e662fef Mon Sep 17 00:00:00 2001 From: Alexander Onnikov Date: Thu, 16 Nov 2023 14:59:50 +0700 Subject: [PATCH] UBERF-4251 Use prosemirror-codemark plugin for inline code (#3999) Signed-off-by: Alexander Onnikov --- common/config/rush/pnpm-lock.yaml | 25 +++++++++++++++---- packages/text-editor/package.json | 3 ++- .../src/components/extension/codemark.ts | 24 ++++++++++++++++++ .../text-editor/src/components/extensions.ts | 2 ++ packages/theme/styles/prose.scss | 2 +- 5 files changed, 49 insertions(+), 7 deletions(-) create mode 100644 packages/text-editor/src/components/extension/codemark.ts diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index ec3735e222..e041a8dce9 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -824,9 +824,6 @@ dependencies: '@typescript-eslint/parser': specifier: ^5.41.0 version: 5.62.0(eslint@8.51.0)(typescript@5.2.2) - allure-commandline: - specifier: 2.24.1 - version: 2.24.1 allure-playwright: specifier: 2.9.2 version: 2.9.2 @@ -1022,6 +1019,9 @@ dependencies: prosemirror-changeset: specifier: ^2.2.1 version: 2.2.1 + prosemirror-codemark: + specifier: ^0.4.2 + version: 0.4.2(prosemirror-model@1.19.3)(prosemirror-state@1.4.3)(prosemirror-view@1.32.0) prosemirror-collab: specifier: ^1.3.1 version: 1.3.1 @@ -13981,6 +13981,19 @@ packages: prosemirror-transform: 1.8.0 dev: false + /prosemirror-codemark@0.4.2(prosemirror-model@1.19.3)(prosemirror-state@1.4.3)(prosemirror-view@1.32.0): + resolution: {integrity: sha512-4n+PnGQToa/vTjn0OiivUvE8/moLtguUAfry8UA4Q8p47MhqT2Qpf2zBLustX5Upi4mSp3z1ZYBqLLovZC6abA==} + peerDependencies: + prosemirror-inputrules: ^1.2.0 + prosemirror-model: ^1.18.1 + prosemirror-state: ^1.4.1 + prosemirror-view: ^1.26.2 + dependencies: + prosemirror-model: 1.19.3 + prosemirror-state: 1.4.3 + prosemirror-view: 1.32.0 + dev: false + /prosemirror-collab@1.3.1: resolution: {integrity: sha512-4SnynYR9TTYaQVXd/ieUvsVV4PDMBzrq2xPUWutHivDuOshZXqQ5rGbZM84HEaXKbLdItse7weMGOUdDVcLKEQ==} dependencies: @@ -22711,7 +22724,7 @@ packages: dev: false file:projects/tests-sanity.tgz: - resolution: {integrity: sha512-Mpuuf0/aFi8XMdgJ8YKvLWE6xJ+gThtS0hZA9bjLdBV1sKUT8jMdHDfxaAcdtrSkWXymVggP+Qs8AAqpwIA8ug==, tarball: file:projects/tests-sanity.tgz} + resolution: {integrity: sha512-gkKzOUcbuaLf4uN8Fd7Mv9+GrAGW+LXCUc+dBuXNgV20G81BUXyFfsTgA/Xib5DntTe+tO+zYQmjMCGZfAHjIQ==, tarball: file:projects/tests-sanity.tgz} name: '@rush-temp/tests-sanity' version: 0.0.0 dependencies: @@ -22736,7 +22749,7 @@ packages: dev: false file:projects/text-editor.tgz(@types/node@16.11.68)(bufferutil@4.0.7)(esbuild@0.16.17)(postcss-load-config@4.0.1)(postcss@8.4.31)(ts-node@10.9.1): - resolution: {integrity: sha512-OzXa/nYb9KYZcR07KJ2MZdeQEKBuy5eV3AO4OPDsvlZZpy7o6Tl3osEImE4kiRgT31bnLs39SD8KNzM1EJhU6g==, tarball: file:projects/text-editor.tgz} + resolution: {integrity: sha512-tOQA1DBz3uTu9nL2yKDYBkvDvF7EDTyD6HHuJx/GVGGD7rXsfYlZrrqM1y212xeggC1IGg3NAjOvODJ/0gKk8g==, tarball: file:projects/text-editor.tgz} id: file:projects/text-editor.tgz name: '@rush-temp/text-editor' version: 0.0.0 @@ -22782,6 +22795,7 @@ packages: prettier: 2.8.8 prettier-plugin-svelte: 2.10.1(prettier@2.8.8)(svelte@3.55.1) prosemirror-changeset: 2.2.1 + prosemirror-codemark: 0.4.2(prosemirror-model@1.19.3)(prosemirror-state@1.4.3)(prosemirror-view@1.32.0) prosemirror-collab: 1.3.1 prosemirror-commands: 1.5.2 prosemirror-dropcursor: 1.8.1 @@ -22818,6 +22832,7 @@ packages: - node-notifier - postcss - postcss-load-config + - prosemirror-inputrules - pug - stylus - sugarss diff --git a/packages/text-editor/package.json b/packages/text-editor/package.json index 5bd7131896..52f26baa46 100644 --- a/packages/text-editor/package.json +++ b/packages/text-editor/package.json @@ -84,6 +84,7 @@ "@tiptap/extension-underline": "^2.1.12", "@tiptap/extension-list-keymap": "^2.1.12", "@hocuspocus/provider": "^2.5.0", - "slugify": "^1.6.6" + "slugify": "^1.6.6", + "prosemirror-codemark": "^0.4.2" } } diff --git a/packages/text-editor/src/components/extension/codemark.ts b/packages/text-editor/src/components/extension/codemark.ts new file mode 100644 index 0000000000..56bcd891e5 --- /dev/null +++ b/packages/text-editor/src/components/extension/codemark.ts @@ -0,0 +1,24 @@ +// +// Copyright © 2023 Hardcore Engineering Inc. +// +// Licensed under the Eclipse Public License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. You may +// obtain a copy of the License at https://www.eclipse.org/legal/epl-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// +// See the License for the specific language governing permissions and +// limitations under the License. +// + +import { Extension } from '@tiptap/core' +import codemark from 'prosemirror-codemark' + +export const CodemarkExtension = Extension.create({ + name: 'codemark', + addProseMirrorPlugins () { + return codemark({ markType: this.editor.schema.marks.code }) + } +}) diff --git a/packages/text-editor/src/components/extensions.ts b/packages/text-editor/src/components/extensions.ts index 21ea4b8d57..6f520488f9 100644 --- a/packages/text-editor/src/components/extensions.ts +++ b/packages/text-editor/src/components/extensions.ts @@ -21,6 +21,7 @@ import { CompletionOptions } from '../Completion' import MentionList from './MentionList.svelte' import { NodeUuidExtension } from './extension/nodeUuid' import { SvelteRenderer } from './node-view' +import { CodemarkExtension } from './extension/codemark' export const tableExtensions = [ Table.configure({ @@ -68,6 +69,7 @@ export const defaultExtensions: AnyExtension[] = [ } } }), + CodemarkExtension, Highlight.configure({ multicolor: false }), diff --git a/packages/theme/styles/prose.scss b/packages/theme/styles/prose.scss index bc4fe50511..6977bf31cb 100644 --- a/packages/theme/styles/prose.scss +++ b/packages/theme/styles/prose.scss @@ -47,7 +47,7 @@ table.proseTable { } .proseCode { - display: inline-block; + display: inline; margin: 0; padding: 0 .25rem; font-family: var(--mono-font);