feat: add inline code (#93)

README.md

@@ -307,6 +307,22 @@ See [`here`](https://github.com/tiavina-mika/mui-tiptap-editor/blob/main/src/dev
     <td>Versions</td>
     <td>Features</td>
   <tr>
+  <tr>
+    <th><a href="https://github.com/tiavina-mika/mui-tiptap-editor/pull/91">v0.10.0</a></th>
+    <td>
+      <ul>
+        <li>Can position the toolbar at the top or bottom.</li>
+      </ul>
+    </td>
+  <tr>
+    <tr>
+    <th><a href="https://github.com/tiavina-mika/mui-tiptap-editor/pull/89">v0.09.33</a></th>
+    <td>
+      <ul>
+        <li>Can show or hide Editor/Preview tabs.</li>
+      </ul>
+    </td>
+  <tr>
   <tr>
     <th><a href="https://github.com/tiavina-mika/mui-tiptap-editor/pull/79">v0.9.29</a></th>
     <td>
@@ -334,15 +350,6 @@ See [`here`](https://github.com/tiavina-mika/mui-tiptap-editor/blob/main/src/dev
       </ul>
     </td>
   <tr>
-  <tr>
-    <th><a href="https://github.com/tiavina-mika/mui-tiptap-editor/pull/52">v0.9.9</a></th>
-    <td>
-      <ul>
-        <li>Work with dark mode</li>
-        <li>Customize and override all messages and labels</li>
-      </ul>
-    </td>
-  <tr>
 </table>
 
 <br />

package.json

@@ -75,6 +75,7 @@
   "dependencies": {
     "@emotion/css": "^11.13.4",
     "@tiptap/extension-bubble-menu": "^2.9.1",
+    "@tiptap/extension-code": "^2.9.1",
     "@tiptap/extension-code-block-lowlight": "^2.9.1",
     "@tiptap/extension-color": "^2.9.1",
     "@tiptap/extension-gapcursor": "^2.9.1",

src/components/Toolbar.tsx

@@ -38,6 +38,7 @@ import Icon from '../icons/Icon';
 import Picture from '../icons/Picture';
 import TextColor from '../icons/TextColor';
 import UploadFile from './UploadFile';
+import CodeBlock from '../icons/CodeBlock';
 
 const classes = {
   topToolbar: (theme: Theme) => ({
@@ -323,11 +324,19 @@ const Toolbar = ({
       },
       {
         name: 'codeBlock',
-        icon: Code,
+        icon: CodeBlock,
         onClick: () => editor.chain().focus().toggleCodeBlock().run(),
         disabled: false,
-        split: true,
         tooltip: toolbarLabels?.codeBlock || 'Code block',
+        iconSize: 16,
+      },
+      {
+        name: 'code',
+        icon: Code,
+        onClick: () => editor.chain().focus().toggleCode().run(),
+        disabled: false,
+        split: true,
+        tooltip: toolbarLabels?.inlineCode || 'Inline code',
       },
       {
         name: 'youtube',

src/dev/App.tsx

@@ -89,7 +89,8 @@ const App = () => {
                 alignRight: 'Aligner à droite',
                 alignJustify: 'Justifier',
                 blockquote: 'Citation',
-                codeBlock: 'Code',
+                codeBlock: 'Code block',
+                inlineCode: 'Inline code',
                 table: 'Table',
                 youtube: 'Youtube',
                 undo: 'Annuler',

src/hooks/useTextEditor.ts

@@ -19,6 +19,7 @@ import TableHeader from '@tiptap/extension-table-header';
 import TableRow from '@tiptap/extension-table-row';
 import Youtube from '@tiptap/extension-youtube';
 import BubbleMenu from '@tiptap/extension-bubble-menu';
+import Code from '@tiptap/extension-code';
 import {
   useEditor,
   EditorOptions,
@@ -43,6 +44,11 @@ const extensions = [
   Text,
   TipTapTypography,
   Underline,
+  Code.configure({
+    HTMLAttributes: {
+      class: 'inline-code',
+    },
+  }),
   Link.configure({
     openOnClick: false,
     protocols: [
@@ -138,7 +144,7 @@ export const useTextEditor = ({
   const editor = useEditor({
     content: value,
     immediatelyRender: false,
-    shouldRerenderOnTransaction: false,
+    shouldRerenderOnTransaction: true,
     extensions: [
       // placeholder extension
       Placeholder.configure({

src/icons/CodeBlock.tsx

@@ -0,0 +1,21 @@
+import { SvgIcon } from '@mui/material';
+
+const CodeBlock = () => {
+  return (
+    <SvgIcon>
+      <svg
+        height="29.69"
+        viewBox="0 0 24 29.69"
+        width="24"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path d="M7.37,12.84,3.55,16.65a1.18,1.18,0,0,0,0,1.66L7.24,22A1.18,1.18,0,0,0,8.9,22a1.18,1.18,0,0,0,0-1.67L6.05,17.48l3-3a1.17,1.17,0,0,0-1.66-1.66Z" fill="currentColor" />
+        <path d="M15,14.5l3,3L15.1,20.34A1.17,1.17,0,0,0,16.76,22l3.69-3.69a1.18,1.18,0,0,0,0-1.66l-3.81-3.81a1.18,1.18,0,0,0-1.67,0A1.17,1.17,0,0,0,15,14.5Z" fill="currentColor" />
+        <path d="M9.61,25.21a1,1,0,0,0,.23,0,.78.78,0,0,0,.75-.56L14.9,10.61a.78.78,0,1,0-1.49-.46L9.09,24.23A.79.79,0,0,0,9.61,25.21Z" fill="currentColor" />
+        <path d="M7.69,0,0,8.12V29.69H24V0ZM7,3.41V7H3.6ZM22.14,27.83H1.86v-19h7v-7H22.14Z" fill="currentColor" />
+      </svg>
+    </SvgIcon>
+  );
+};
+
+export default CodeBlock;

src/types.d.ts

@@ -114,6 +114,7 @@ export type IRequiredLabels = {
     upload: string;
     color: string;
     codeBlock: string;
+    inlineCode: string;
     table: string;
     youtube: string;
     undo: string;

yarn.lock

@@ -7106,6 +7106,7 @@ __metadata:
     "@mui/material": "npm:^5.15.2"
     "@stylistic/eslint-plugin": "npm:^2.9.0"
     "@tiptap/extension-bubble-menu": "npm:^2.9.1"
+    "@tiptap/extension-code": "npm:^2.9.1"
     "@tiptap/extension-code-block-lowlight": "npm:^2.9.1"
     "@tiptap/extension-color": "npm:^2.9.1"
     "@tiptap/extension-gapcursor": "npm:^2.9.1"