yujunjun/strapi
1
0
Fork 0
mirror of https://github.com/strapi/strapi.git synced 2025-11-02 10:55:37 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(content-manager): add highlights to code block using Prismjs

Browse Source
This commit is contained in:
Simone Taeggi 2024-11-27 14:21:26 +01:00
parent ebfa9dd412
commit fb2ef18ba8
8 changed files with 164 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/Code.tsx
View File

@ -12,6 +12,8 @@ import { codeLanguages } from '../utils/constants';
import { baseHandleConvert } from '../utils/conversions';
import { pressEnterTwiceToExit } from '../utils/enterKey';
import { type Block } from '../utils/types';
// Import the PrismJS theme to highlight the code
import 'prismjs/themes/prism-solarizedlight.css';
const CodeBlock = styled.pre`
border-radius: ${({ theme }) => theme.borderRadius};

5
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/Blocks/tests/Code.test.tsx
View File

@ -15,6 +15,7 @@ describe('Code', () => {
element: {
type: 'code',
children: [{ type: 'text', text: 'Some code' }],
language: 'javascript',
},
attributes: {
'data-slate-node': 'element',
@ -30,6 +31,7 @@ describe('Code', () => {
expect(screen.getByRole('code')).toBeInTheDocument();
expect(screen.getByText('Some code')).toBeInTheDocument();
screen.debug();
});
it('handles enter key on a code block', () => {
@ -44,6 +46,7 @@ describe('Code', () => {
text: 'Some code',
},
],
language: 'javascript',
},
];
@ -64,6 +67,7 @@ describe('Code', () => {
text: 'Some code\n',
},
],
language: 'javascript',
},
]);
@ -84,6 +88,7 @@ describe('Code', () => {
text: 'Some code',
},
],
language: 'javascript',
},
{
type: 'paragraph',

8
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/BlocksContent.tsx
View File

@ -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}

55
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/constants.ts
View File

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

38
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/decorateCode.ts Normal file
View File

@ -0,0 +1,38 @@
import * as Prism from 'prismjs';
import { BaseRange, Element, Node, NodeEntry } from 'slate';
import './prismLanguages';
import { codeLanguages } from './constants';
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;
};

49
packages/core/content-manager/admin/src/pages/EditView/components/FormInputs/BlocksInput/utils/prismLanguages.ts Normal file
View File

@ -0,0 +1,49 @@
import 'prismjs/components/prism-asmatmel';
import 'prismjs/components/prism-bash';
import 'prismjs/components/prism-basic';
import 'prismjs/components/prism-c';
import 'prismjs/components/prism-clojure';
import 'prismjs/components/prism-cobol';
import 'prismjs/components/prism-cpp';
import 'prismjs/components/prism-csharp';
import 'prismjs/components/prism-dart';
import 'prismjs/components/prism-docker';
import 'prismjs/components/prism-elixir';
import 'prismjs/components/prism-erlang';
import 'prismjs/components/prism-fortran';
import 'prismjs/components/prism-fsharp';
import 'prismjs/components/prism-go';
import 'prismjs/components/prism-graphql';
import 'prismjs/components/prism-groovy';
import 'prismjs/components/prism-haskell';
import 'prismjs/components/prism-haxe';
import 'prismjs/components/prism-ini';
import 'prismjs/components/prism-java';
import 'prismjs/components/prism-javascript';
import 'prismjs/components/prism-jsx';
import 'prismjs/components/prism-json';
import 'prismjs/components/prism-julia';
import 'prismjs/components/prism-kotlin';
import 'prismjs/components/prism-latex';
import 'prismjs/components/prism-lua';
import 'prismjs/components/prism-markdown';
import 'prismjs/components/prism-matlab';
import 'prismjs/components/prism-makefile';
import 'prismjs/components/prism-objectivec';
import 'prismjs/components/prism-perl';
import 'prismjs/components/prism-php';
import 'prismjs/components/prism-powershell';
import 'prismjs/components/prism-python';
import 'prismjs/components/prism-r';
import 'prismjs/components/prism-ruby';
import 'prismjs/components/prism-rust';
import 'prismjs/components/prism-sas';
import 'prismjs/components/prism-scala';
import 'prismjs/components/prism-scheme';
import 'prismjs/components/prism-sql';
import 'prismjs/components/prism-stata';
import 'prismjs/components/prism-swift';
import 'prismjs/components/prism-typescript';
import 'prismjs/components/prism-tsx';
import 'prismjs/components/prism-vbnet';
import 'prismjs/components/prism-yaml';

1
packages/core/content-manager/package.json
View File

@ -104,6 +104,7 @@
"@testing-library/react": "15.0.7",
"@types/jest": "29.5.2",
"@types/lodash": "^4.14.191",
"@types/prismjs": "1.26.5",
"koa-body": "6.0.1",
"msw": "1.3.0",
"react": "18.3.1",

8
yarn.lock
View File

@ -7218,6 +7218,7 @@ __metadata:
"@testing-library/react": "npm:15.0.7"
"@types/jest": "npm:29.5.2"
"@types/lodash": "npm:^4.14.191"
"@types/prismjs": "npm:1.26.5"
codemirror5: "npm:codemirror@^5.65.11"
date-fns: "npm:2.30.0"
fractional-indexing: "npm:3.2.0"
@ -9682,6 +9683,13 @@ __metadata:
languageName: node
linkType: hard
"@types/prismjs@npm:1.26.5":
version: 1.26.5
resolution: "@types/prismjs@npm:1.26.5"
checksum: 10c0/5619cb449e0d8df098c8759d6f47bf8fdd510abf5dbdfa999e55c6a2545efbd1e209cc85a33d8d9f4ff2898089a1a6d9a70737c9baffaae635c46852c40d384a
languageName: node
linkType: hard
"@types/prompts@npm:2.4.9":
version: 2.4.9
resolution: "@types/prompts@npm:2.4.9"