-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
) : (
- <>
+ <>
);
}
diff --git a/hosting/src/components/Tiptap/TiptapEditor.tsx b/hosting/src/components/Tiptap/TiptapEditor.tsx
index 0f55a754..72751e99 100644
--- a/hosting/src/components/Tiptap/TiptapEditor.tsx
+++ b/hosting/src/components/Tiptap/TiptapEditor.tsx
@@ -1,19 +1,28 @@
"use client";
+import BubbleMenu from "@/components/Tiptap/BubbleMenu";
+import CodeBlock from "@/components/Tiptap/CodeBlock";
+import FloatingMenu from "@/components/Tiptap/FloatingMenu";
import Loader from "@/components/common/Loader";
-import Bold from "@tiptap/extension-bold";
import BulletList from "@tiptap/extension-bullet-list";
-import Document from "@tiptap/extension-document";
+import CodeBlockLowlight from "@tiptap/extension-code-block-lowlight";
import Heading from "@tiptap/extension-heading";
-import Italic from "@tiptap/extension-italic";
-import ListItem from "@tiptap/extension-list-item";
+import Link from "@tiptap/extension-link";
import OrderedList from "@tiptap/extension-ordered-list";
import Paragraph from "@tiptap/extension-paragraph";
-import Text from "@tiptap/extension-text";
-import {EditorContent, useEditor} from "@tiptap/react";
+import Underline from "@tiptap/extension-underline";
+import {EditorContent, ReactNodeViewRenderer as reactNodeViewRenderer, useEditor} from "@tiptap/react";
import StarterKit from "@tiptap/starter-kit";
+import css from "highlight.js/lib/languages/css";
+import js from "highlight.js/lib/languages/javascript";
+import ts from "highlight.js/lib/languages/typescript";
+import html from "highlight.js/lib/languages/xml";
+import {common, createLowlight} from "lowlight";
import {Suspense, useCallback, useEffect} from "react";
+import "./styles/tiptap-main.scss";
+
const DEFAULT_DEBOUNCE = 2000;
+const lowlight = createLowlight(common);
interface TiptapEditorProps {
key: string;
@@ -40,6 +49,11 @@ function debounce
(func: T, wait: number) {
};
}
+lowlight.register("html", html);
+lowlight.register("css", css);
+lowlight.register("js", js);
+lowlight.register("ts", ts);
+
export default function TiptapEditor(props: TiptapEditorProps) {
const debouncedOnChange = useCallback(
debounce(async (content: string) => {
@@ -54,15 +68,23 @@ export default function TiptapEditor(props: TiptapEditorProps) {
const editor = useEditor({
extensions: [
StarterKit,
- Document,
+ Underline,
+ CodeBlockLowlight.extend({
+ addNodeView() {
+ return reactNodeViewRenderer(CodeBlock);
+ },
+ }).configure({lowlight}),
Paragraph,
- Text,
- Heading.configure({levels: [1, 2, 3]}),
- Bold,
- Italic,
+ Heading.configure({
+ levels: [1, 2, 3],
+ }),
BulletList,
OrderedList,
- ListItem,
+ Link.configure({
+ openOnClick: false,
+ autolink: true,
+ defaultProtocol: "https",
+ }),
],
editable: !props.disabled,
content: props.value,
@@ -84,13 +106,13 @@ export default function TiptapEditor(props: TiptapEditorProps) {
return (
}>
-
- {/* {editor && (
+ {editor && (
<>
- )} */}
+ )}
+
);
}
diff --git a/hosting/src/components/Tiptap/styles/bubble-menu.scss b/hosting/src/components/Tiptap/styles/bubble-menu.scss
new file mode 100644
index 00000000..8dfc5e23
--- /dev/null
+++ b/hosting/src/components/Tiptap/styles/bubble-menu.scss
@@ -0,0 +1,33 @@
+/* Bubble menu */
+.bubble-menu {
+ background: unset;
+ box-shadow: unset;
+ border: unset;
+
+ & button {
+ background-color: unset;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ color: var(--white);
+ }
+
+ &.is-active {
+ background-color: rgba(0, 0, 0, 0.3);
+ color: var(--white);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ color: var(--white);
+ }
+ }
+ }
+
+ & .separator {
+ width: 1px;
+ height: 28px;
+ background: #dcdbdd;
+ margin-right: 8px;
+ margin-left: 8px;
+ }
+}
diff --git a/hosting/src/components/Tiptap/styles/code-block.scss b/hosting/src/components/Tiptap/styles/code-block.scss
new file mode 100644
index 00000000..e7f927fa
--- /dev/null
+++ b/hosting/src/components/Tiptap/styles/code-block.scss
@@ -0,0 +1,12 @@
+.tiptap {
+ & .code-block {
+ position: relative;
+
+ & select {
+ position: absolute;
+ background-color: var(--white);
+ right: 0.5rem;
+ top: 0.5rem;
+ }
+ }
+}
diff --git a/hosting/src/components/Tiptap/styles/floating-menu.scss b/hosting/src/components/Tiptap/styles/floating-menu.scss
new file mode 100644
index 00000000..71eb9b89
--- /dev/null
+++ b/hosting/src/components/Tiptap/styles/floating-menu.scss
@@ -0,0 +1,33 @@
+/* Floating menu */
+.floating-menu {
+ // background: unset;
+ // box-shadow: unset;
+ // border: unset;
+
+ & button {
+ background-color: unset;
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ color: var(--white);
+ }
+
+ &.is-active {
+ background-color: rgba(0, 0, 0, 0.3);
+ color: var(--white);
+
+ &:hover {
+ background-color: rgba(0, 0, 0, 0.3);
+ color: var(--white);
+ }
+ }
+ }
+
+ & .separator {
+ width: 1px;
+ height: 28px;
+ background: #dcdbdd;
+ margin-right: 8px;
+ margin-left: 8px;
+ }
+}
diff --git a/hosting/src/components/Tiptap/styles/tiptap-main.scss b/hosting/src/components/Tiptap/styles/tiptap-main.scss
new file mode 100644
index 00000000..e2a9469f
--- /dev/null
+++ b/hosting/src/components/Tiptap/styles/tiptap-main.scss
@@ -0,0 +1,96 @@
+:root {
+ --white: #fff;
+ --black: #2e2b29;
+ --black-contrast: #110f0e;
+ --gray-1: rgba(61, 37, 20, 0.05);
+ --gray-2: rgba(61, 37, 20, 0.08);
+ --gray-3: rgba(61, 37, 20, 0.12);
+ --gray-4: rgba(53, 38, 28, 0.3);
+ --gray-5: rgba(28, 25, 23, 0.6);
+ --green: #22c55e;
+ --purple: #6a00f5;
+ --purple-contrast: #5800cc;
+ --purple-light: rgba(88, 5, 255, 0.05);
+ --yellow-contrast: #facc15;
+ --yellow: rgba(250, 204, 21, 0.4);
+ --yellow-light: #fffae5;
+ --red: #ff5c33;
+ --red-light: #ffebe5;
+ --shadow: 0px 12px 33px 0px rgba(0, 0, 0, 0.06), 0px 3.618px 9.949px 0px rgba(0, 0, 0, 0.04);
+}
+
+/* Basic editor styles */
+.tiptap {
+ :first-child {
+ margin-top: 0;
+ }
+
+ & pre {
+ background: var(--black);
+ border-radius: 0.5rem;
+ color: var(--white);
+ font-family: "JetBrainsMono", monospace;
+ margin: 1.5rem 0;
+ padding: 0.75rem 1rem;
+
+ & code {
+ background: none;
+ color: inherit;
+ font-size: 0.8rem;
+ padding: 0;
+ }
+
+ /* Code styling */
+ & .hljs-comment,
+ .hljs-quote {
+ color: #616161;
+ }
+
+ & .hljs-variable,
+ .hljs-template-variable,
+ .hljs-attribute,
+ .hljs-tag,
+ .hljs-name,
+ .hljs-regexp,
+ .hljs-link,
+ .hljs-name,
+ .hljs-selector-id,
+ .hljs-selector-class {
+ color: #f98181;
+ }
+
+ & .hljs-number,
+ .hljs-meta,
+ .hljs-built_in,
+ .hljs-builtin-name,
+ .hljs-literal,
+ .hljs-type,
+ .hljs-params {
+ color: #fbbc88;
+ }
+
+ & .hljs-string,
+ .hljs-symbol,
+ .hljs-bullet {
+ color: #b9f18d;
+ }
+
+ & .hljs-title,
+ .hljs-section {
+ color: #faf594;
+ }
+
+ & .hljs-keyword,
+ .hljs-selector-tag {
+ color: #70cff8;
+ }
+
+ & .hljs-emphasis {
+ font-style: italic;
+ }
+
+ & .hljs-strong {
+ font-weight: 700;
+ }
+ }
+}