feat(content-manager): revert prismjs logic

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 <span {...props.attributes}>{wrappedChildren}</span>;
+  return (
+    <span {...props.attributes} className={props.leaf.className}>
+      {wrappedChildren}
+    </span>
+  );
 };
 
 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}

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',
   },
 ];

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;
+};

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;