From fee8edab8d29dc3475be8d459ecb678b73c6748a Mon Sep 17 00:00:00 2001 From: Simone Taeggi Date: Mon, 2 Dec 2024 16:23:56 +0100 Subject: [PATCH] feat(content-manager): revert prismjs logic --- .../FormInputs/BlocksInput/BlocksContent.tsx | 8 ++- .../FormInputs/BlocksInput/utils/constants.ts | 55 ++++++++++++++++++- .../BlocksInput/utils/decorateCode.ts | 37 +++++++++++++ .../BlocksInput/{Blocks => }/utils/prism.ts | 2 +- 4 files changed, 99 insertions(+), 3 deletions(-) create mode 100644 packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/decorateCode.ts rename packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/{Blocks => }/utils/prism.ts (99%) diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.tsx b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.tsx index 60a6a41092..4245da4c87 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.tsx +++ b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.tsx @@ -22,6 +22,7 @@ import { getTranslation } from '../../../../../utils/translations'; import { type BlocksStore, useBlocksEditorContext } from './BlocksEditor'; import { useConversionModal } from './BlocksToolbar'; import { type ModifiersStore } from './Modifiers'; +import { decorateCode } from './utils/decorateCode'; import { getEntries, isLinkNode, isListNode } from './utils/types'; const StyledEditable = styled(Editable)<{ isExpandedMode: boolean }>` @@ -299,7 +300,11 @@ const baseRenderLeaf = (props: RenderLeafProps, modifiers: ModifiersStore) => { return currentChildren; }, props.children); - return {wrappedChildren}; + return ( + + {wrappedChildren} + + ); }; type BaseRenderElementProps = Direction & { @@ -591,6 +596,7 @@ const BlocksContent = ({ placeholder, ariaLabelId }: BlocksContentProps) => { readOnly={disabled} placeholder={placeholder} isExpandedMode={isExpandedMode} + decorate={decorateCode} renderElement={renderElement} renderLeaf={renderLeaf} onKeyDown={handleKeyDown} diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.ts b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.ts index 22f6b46962..0dcec40145 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.ts +++ b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.ts @@ -1,214 +1,267 @@ -export const codeLanguages: { value: string; label: string }[] = [ +export const codeLanguages: { value: string; label: string; decorate?: string }[] = [ { value: 'asm', label: 'Assembly', + decorate: 'asmatmel', }, { value: 'bash', label: 'Bash', + decorate: 'bash', }, { value: 'c', label: 'C', + decorate: 'c', }, { value: 'clojure', label: 'Clojure', + decorate: 'clojure', }, { value: 'cobol', label: 'COBOL', + decorate: 'cobol', }, { value: 'cpp', label: 'C++', + decorate: 'cpp', }, { value: 'csharp', label: 'C#', + decorate: 'csharp', }, { value: 'css', label: 'CSS', + decorate: 'css', }, { value: 'dart', label: 'Dart', + decorate: 'dart', }, { value: 'dockerfile', label: 'Dockerfile', + decorate: 'docker', }, { value: 'elixir', label: 'Elixir', + decorate: 'elixir', }, { value: 'erlang', label: 'Erlang', + decorate: 'erlang', }, { value: 'fortran', label: 'Fortran', + decorate: 'fortran', }, { value: 'fsharp', label: 'F#', + decorate: 'fsharp', }, { value: 'go', label: 'Go', + decorate: 'go', }, { value: 'graphql', label: 'GraphQL', + decorate: 'graphql', }, { value: 'groovy', label: 'Groovy', + decorate: 'groovy', }, { value: 'haskell', label: 'Haskell', + decorate: 'haskell', }, { value: 'haxe', label: 'Haxe', + decorate: 'haxe', }, { value: 'html', label: 'HTML', + decorate: 'html', }, { value: 'ini', label: 'INI', + decorate: 'ini', }, { value: 'java', label: 'Java', + decorate: 'java', }, { value: 'javascript', label: 'JavaScript', + decorate: 'javascript', }, { value: 'jsx', label: 'JavaScript (React)', + decorate: 'jsx', }, { value: 'json', label: 'JSON', + decorate: 'json', }, { value: 'julia', label: 'Julia', + decorate: 'julia', }, { value: 'kotlin', label: 'Kotlin', + decorate: 'kotlin', }, { value: 'latex', label: 'LaTeX', + decorate: 'latex', }, { value: 'lua', label: 'Lua', + decorate: 'lua', }, { value: 'markdown', label: 'Markdown', + decorate: 'markdown', }, { value: 'matlab', label: 'MATLAB', + decorate: 'matlab', }, { value: 'makefile', label: 'Makefile', + decorate: 'makefile', }, { value: 'objectivec', label: 'Objective-C', + decorate: 'objectivec', }, { value: 'perl', label: 'Perl', + decorate: 'perl', }, { value: 'php', label: 'PHP', + decorate: 'php', }, { value: 'plaintext', label: 'Plain text', + decorate: 'plaintext', }, { value: 'powershell', label: 'PowerShell', + decorate: 'powershell', }, { value: 'python', label: 'Python', + decorate: 'python', }, { value: 'r', label: 'R', + decorate: 'r', }, { value: 'ruby', label: 'Ruby', + decorate: 'ruby', }, { value: 'rust', label: 'Rust', + decorate: 'rust', }, { value: 'sas', label: 'SAS', + decorate: 'sas', }, { value: 'scala', label: 'Scala', + decorate: 'scala', }, { value: 'scheme', label: 'Scheme', + decorate: 'scheme', }, { value: 'shell', label: 'Shell', + decorate: 'shell', }, { value: 'sql', label: 'SQL', + decorate: 'sql', }, { value: 'stata', label: 'Stata', + decorate: 'stata', }, { value: 'swift', label: 'Swift', + decorate: 'swift', }, { value: 'typescript', label: 'TypeScript', + decorate: 'ts', }, { value: 'tsx', label: 'TypeScript (React)', + decorate: 'tsx', }, { value: 'vbnet', label: 'VB.NET', + decorate: 'vbnet', }, { value: 'xml', label: 'XML', + decorate: 'xml', }, { value: 'yaml', label: 'YAML', + decorate: 'yml', }, ]; diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/decorateCode.ts b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/decorateCode.ts new file mode 100644 index 0000000000..7533321dbf --- /dev/null +++ b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/decorateCode.ts @@ -0,0 +1,37 @@ +import { BaseRange, Element, Node, NodeEntry } from 'slate'; + +import { codeLanguages } from './constants'; +import { Prism } from './prism'; + +type BaseRangeCustom = BaseRange & { className: string }; + +export const decorateCode = ([node, path]: NodeEntry) => { + const ranges: BaseRangeCustom[] = []; + + // make sure it is an Slate Element + if (!Element.isElement(node) || node.type !== 'code') return ranges; + // transform the Element into a string + const text = Node.string(node); + const decorateKey = codeLanguages.find((lang) => lang.value === node.language)?.decorate; + + const selectedLanguage = Prism.languages[decorateKey || 'plaintext']; + + // create "tokens" with "prismjs" and put them in "ranges" + const tokens = Prism.tokenize(text, selectedLanguage); + let start = 0; + for (const token of tokens) { + const length = token.length; + const end = start + length; + if (typeof token !== 'string') { + ranges.push({ + anchor: { path, offset: start }, + focus: { path, offset: end }, + className: `token ${token.type}`, + }); + } + start = end; + } + + // these will be found in "renderLeaf" in "leaf" and their "className" will be applied + return ranges; +}; diff --git a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/utils/prism.ts b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/prism.ts similarity index 99% rename from packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/utils/prism.ts rename to packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/prism.ts index 01681eadc3..d97fcb8b22 100644 --- a/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/utils/prism.ts +++ b/packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/prism.ts @@ -19,7 +19,7 @@ const _self = * @namespace * @public */ -const Prism = (function (_self) { +export const Prism = (function (_self) { // Private helper vars var lang = /(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i; var uniqueId = 0;