fix code-highlighting example, add toolbar code block button

ianstormtaylor · Feb 8, 2023 · a656d54 · a656d54
1 parent 672f762
commit a656d54
Show file tree

Hide file tree

Showing 2 changed files with 62 additions and 10 deletions.
diff --git a/playwright/integration/examples/code-highlighting.test.ts b/playwright/integration/examples/code-highlighting.test.ts
@@ -37,13 +37,17 @@ async function setText(page: Page, text: string, language: string) {
   } else {
     await page.keyboard.press('Control+A')
   }
+  await page.keyboard.press('Backspace')
+
+  const codeBlockButton = await page.getByTestId('code-block-button')
+  await codeBlockButton.click({ force: true }) // convert elements to code block
   await page.keyboard.type(text)
 
-  const codeLine = await page
-    .locator('[data-slate-element-type="code-line"]')
+  const codeBlock = await page
+    .locator('[data-slate-element-type="code-block"]')
     .nth(0)
 
-  const select = await codeLine.locator('select').nth(0)
+  const select = await codeBlock.locator('select').nth(0)
 
   await select.selectOption({ value: language }) // Select the language option
   await expect(await select.inputValue()).toBe(language) // Confirm value to avoid race condition
@@ -114,18 +118,18 @@ function getTestCases() {
         ['"', 'rgb(0, 119, 170)'],
         [' ', 'rgb(153, 0, 85)'],
         ['renderIcon', 'rgb(102, 153, 0)'],
-        ['=', 'rgb(153, 153, 153)'],
-        ['{', 'rgb(153, 153, 153)'],
-        ['(', 'rgb(153, 153, 153)'],
-        [')', 'rgb(153, 153, 153)'],
-        [' ', 'rgb(0, 0, 0)'],
+        ['=', 'rgb(153, 0, 85)'],
+        ['{', 'rgb(153, 0, 85)'],
+        ['(', 'rgb(153, 0, 85)'],
+        [')', 'rgb(153, 0, 85)'],
+        [' ', 'rgb(153, 0, 85)'],
         ['=>', 'rgb(154, 110, 58)'],
-        [' ', 'rgb(0, 0, 0)'],
+        [' ', 'rgb(153, 0, 85)'],
         ['<', 'rgb(153, 0, 85)'],
         ['Icon', 'rgb(221, 74, 104)'],
         [' ', 'rgb(153, 0, 85)'],
         ['/>', 'rgb(153, 0, 85)'],
-        ['}', 'rgb(153, 153, 153)'],
+        ['}', 'rgb(153, 0, 85)'],
         [' ', 'rgb(153, 0, 85)'],
         ['/>', 'rgb(153, 0, 85)'],
       ],

diff --git a/site/examples/code-highlighting.tsx b/site/examples/code-highlighting.tsx
@@ -33,6 +33,7 @@ import isHotkey from 'is-hotkey'
 import { css } from '@emotion/css'
 import { CodeBlockElement } from './custom-types'
 import { normalizeTokens } from '../utils/normalize-tokens'
+import { Button, Icon, Toolbar } from '../components'
 
 const ParagraphType = 'paragraph'
 const CodeBlockType = 'code-block'
@@ -46,6 +47,7 @@ const CodeHighlightingExample = () => {
 
   return (
     <Slate editor={editor} value={initialValue}>
+      <ExampleToolbar />
       <SetNodeToDecorations />
       <Editable
         decorate={decorate}
@@ -62,6 +64,8 @@ const renderElement = (props: RenderElementProps) => {
   const { attributes, children, element } = props
   const editor = useSlateStatic()
 
+  attributes['data-slate-element-type'] = element.type // for elements selecting in integration test
+
   if (element.type === CodeBlockType) {
     const setLanguage = (language: string) => {
       const path = ReactEditor.findPath(editor, element)
@@ -107,6 +111,46 @@ const renderElement = (props: RenderElementProps) => {
   )
 }
 
+const ExampleToolbar = () => {
+  return (
+    <Toolbar>
+      <CodeBlockButton />
+    </Toolbar>
+  )
+}
+
+const CodeBlockButton = () => {
+  const editor = useSlateStatic()
+  const handleClick = () => {
+    Transforms.wrapNodes(
+      editor,
+      { type: CodeBlockType, language: 'html', children: [] },
+      {
+        match: n => Element.isElement(n) && n.type === ParagraphType,
+        split: true,
+      }
+    )
+    Transforms.setNodes(
+      editor,
+      { type: CodeLineType },
+      { match: n => Element.isElement(n) && n.type === ParagraphType }
+    )
+  }
+
+  return (
+    <Button
+      data-test-id="code-block-button"
+      active
+      onMouseDown={event => {
+        event.preventDefault()
+        handleClick()
+      }}
+    >
+      <Icon>code</Icon>
+    </Button>
+  )
+}
+
 const renderLeaf = (props: RenderLeafProps) => {
   const { attributes, children, leaf } = props
   const { text, ...rest } = leaf
@@ -317,6 +361,10 @@ declare module 'slate' {
   }
 }`),
   },
+  {
+    type: ParagraphType,
+    children: toChildren('There you have it!'),
+  },
 ]
 
 // Prismjs theme stored as a string instead of emotion css function.