-
+
+
+
+
);
-});
+};
diff --git a/client/src/components/Editor/MilkdownEditor.tsx b/client/src/components/Editor/MilkdownEditor.tsx
new file mode 100644
index 0000000..b9ccc95
--- /dev/null
+++ b/client/src/components/Editor/MilkdownEditor.tsx
@@ -0,0 +1,158 @@
+import { Editor, editorViewCtx, editorViewOptionsCtx, parserCtx } from '@milkdown/kit/core';
+import { Ctx } from '@milkdown/kit/ctx';
+import { listenerCtx } from '@milkdown/kit/plugin/listener';
+import { Slice } from '@milkdown/kit/prose/model';
+import { Milkdown, useEditor } from '@milkdown/react';
+import { outline } from '@milkdown/utils';
+import { FC, useEffect, useImperativeHandle, useReducer, useRef } from 'react';
+import { useDispatch, useSelector } from 'react-redux';
+
+import { getCrepe } from './crepe';
+import { removeEvents, scrollHandler, blurHandler, anchorHandler, syncMirror } from './mountedAddons';
+import { headingConfig } from './plugins/plugin-heading';
+
+import { selectCurDoc, updateHeadings } from '@/redux-feature/curDocSlice';
+import { updateGlobalOpts } from '@/redux-feature/globalOptsSlice';
+import { scrollToEditorAnchor } from '@/utils/hooks/docHooks';
+import { updateLocationHash } from '@/utils/utils';
+
+export interface CrepeEditorRef {
+ update: (newContent: string) => void;
+ get: () => Editor | undefined;
+ /** used to trigger reser the editor */
+ reRender: () => void;
+}
+
+export interface CrepeEditorProps {
+ /** default as "" */
+ defaultValue?: string;
+ /** default as false */
+ isDarkMode?: boolean;
+ /** default as false */
+ readonly?: boolean;
+ onMounted?: (ctx: Ctx) => void;
+ onUpdated?: (ctx: Ctx, markdown: string) => void;
+ onToAnchor?: (id: string) => void;
+
+ ref: React.RefObject
;
+}
+
+export const CrepeEditor: FC = ({
+ defaultValue = '',
+ isDarkMode = false,
+ readonly = false,
+ onMounted,
+ onUpdated,
+ onToAnchor,
+ ref: editorWrappedRef,
+}) => {
+ const [reRenderMarker, reRender] = useReducer((x) => x + 1, 0);
+
+ const dispatch = useDispatch();
+ const { scrollTop } = useSelector(selectCurDoc);
+
+ // This is used to avoid the closure issue
+ // when hook functions from props are updated but editor is not reset
+ const hookRefs = useRef<{
+ onUpdated: CrepeEditorProps['onUpdated'];
+ onMounted: CrepeEditorProps['onMounted'];
+ onToAnchor: CrepeEditorProps['onToAnchor'];
+ }>({
+ onUpdated: (...args) => {
+ onUpdated?.(...args);
+ },
+ onMounted: (...args) => {
+ onMounted?.(...args);
+ },
+ onToAnchor: (...args) => {
+ onToAnchor?.(...args);
+ },
+ });
+
+ useEffect(() => {
+ hookRefs.current.onUpdated = onUpdated;
+ hookRefs.current.onMounted = onMounted;
+ hookRefs.current.onToAnchor = onToAnchor;
+ }, [onUpdated, onMounted, onToAnchor]);
+
+ const { get } = useEditor(
+ (root) => {
+ const crepe = getCrepe({
+ root,
+ defaultValue,
+ isDarkMode,
+ });
+
+ crepe.editor.config((ctx) => {
+ ctx
+ .get(listenerCtx)
+ .mounted(() => {
+ dispatch(updateHeadings(outline()(ctx)));
+
+ removeEvents();
+
+ scrollHandler(scrollTop, dispatch);
+
+ blurHandler(dispatch);
+
+ // has higher priority than the scrollHandler
+ anchorHandler(dispatch);
+
+ syncMirror(readonly);
+
+ hookRefs.current.onMounted?.(ctx);
+ })
+ .markdownUpdated((_, markdown) => {
+ const headings = outline()(ctx);
+ dispatch(updateHeadings(headings));
+
+ hookRefs.current.onUpdated?.(ctx, markdown);
+ });
+
+ // edit mode
+ ctx.set(editorViewOptionsCtx, {
+ editable: () => !readonly,
+ });
+
+ ctx.set(headingConfig.key, {
+ toAnchor: (id: string) => {
+ updateLocationHash(id);
+ scrollToEditorAnchor(id);
+ dispatch(updateGlobalOpts({ keys: ['anchor'], values: [id] }));
+
+ hookRefs.current.onToAnchor?.(id);
+ },
+ });
+ });
+
+ return crepe;
+ },
+ [isDarkMode, readonly, reRenderMarker],
+ );
+
+ // for update the editor using a wrapped ref
+ useImperativeHandle(
+ editorWrappedRef,
+ () => ({
+ get,
+ reRender,
+ update: (markdown: string) => {
+ const editor = get();
+ if (!editor) return;
+
+ editor.action((ctx) => {
+ const view = ctx.get(editorViewCtx);
+ const parser = ctx.get(parserCtx);
+ const doc = parser(markdown);
+ if (!doc) return;
+
+ const state = view.state;
+ view.dispatch(state.tr.replace(0, state.doc.content.size, new Slice(doc.content, 0, 0)));
+ });
+ },
+ }),
+ [get, reRender],
+ );
+
+ return ;
+};
diff --git a/client/src/components/Editor/components/TooltipInput/index.scss b/client/src/components/Editor/components/TooltipInput/index.scss
new file mode 100644
index 0000000..8f98355
--- /dev/null
+++ b/client/src/components/Editor/components/TooltipInput/index.scss
@@ -0,0 +1,18 @@
+@use '@/utils/utils.scss' as *;
+
+.tooltip-input {
+ .p-tooltip-arrow {
+ display: none;
+ }
+ .p-tooltip-text {
+ background-color: $backgroundColor;
+ padding: 10px;
+ @include flex-center();
+ input {
+ height: 24px;
+ margin-right: 1rem;
+ background-color: $backgroundColor;
+ color: $contentTextColor;
+ }
+ }
+}
\ No newline at end of file
diff --git a/client/src/components/Editor/components/TooltipInput/index.tsx b/client/src/components/Editor/components/TooltipInput/index.tsx
new file mode 100644
index 0000000..0afa8e4
--- /dev/null
+++ b/client/src/components/Editor/components/TooltipInput/index.tsx
@@ -0,0 +1,47 @@
+import { InputText } from 'primereact/inputtext';
+import { Tooltip, TooltipProps } from 'primereact/tooltip';
+import { FC } from 'react';
+
+import { Icon, IconProps } from '@/components/Icon/Icon';
+
+import './index.scss';
+
+export interface TooltipInputProps {
+ tooltipOptions: TooltipProps;
+ iconOptions: IconProps;
+ value: string;
+ placeholder?: string;
+ onChange: (value: string) => void;
+ onConfirm: () => void;
+}
+
+export const TooltipInput: FC = ({
+ tooltipOptions,
+ iconOptions,
+ value,
+ placeholder,
+ onChange,
+ onConfirm,
+}) => {
+ return (
+
+ {
+ onChange(e.target.value);
+ }}
+ />
+ {
+ onConfirm();
+ }}
+ showToolTip={false}
+ {...iconOptions}
+ />
+
+ );
+};
diff --git a/client/src/components/Editor/configs/crepeFeatures.ts b/client/src/components/Editor/configs/crepeFeatures.ts
new file mode 100644
index 0000000..9e7899b
--- /dev/null
+++ b/client/src/components/Editor/configs/crepeFeatures.ts
@@ -0,0 +1,141 @@
+import { BlockEditFeatureConfig } from '@milkdown/crepe/lib/types/feature/block-edit';
+import { CodeMirrorFeatureConfig } from '@milkdown/crepe/lib/types/feature/code-mirror';
+import { ToolbarFeatureConfig } from '@milkdown/crepe/lib/types/feature/toolbar';
+import { commandsCtx } from '@milkdown/kit/core';
+import {
+ clearTextInCurrentBlockCommand,
+ addBlockTypeCommand,
+ isMarkSelectedCommand,
+ codeBlockSchema,
+ wrapInBlockTypeCommand,
+} from '@milkdown/kit/preset/commonmark';
+import { githubDark, githubLight } from '@uiw/codemirror-theme-github';
+import mermaid from 'mermaid';
+
+import { containerSchema, ContainerType } from '../plugins/plugin-container';
+import { highlightSchema, showColorPickerCommand } from '../plugins/plugin-highlight';
+import { iframeBlockSchema } from '../plugins/plugin-iframe';
+
+import Toast from '@/utils/Toast';
+import { nextTick, uid } from '@/utils/utils';
+
+export const getBlockEditConfig = (): BlockEditFeatureConfig => ({
+ buildMenu(builder) {
+ const advancedGroup = builder.getGroup('advanced');
+
+ advancedGroup.addItem('Iframe', {
+ icon: '',
+ label: 'Iframe',
+ onRun: (ctx) => {
+ const commands = ctx.get(commandsCtx);
+ const iframeBlock = iframeBlockSchema.type(ctx);
+ commands.call(clearTextInCurrentBlockCommand.key);
+ commands.call(addBlockTypeCommand.key, {
+ nodeType: iframeBlock,
+ attrs: { src: '' },
+ });
+ },
+ });
+
+ advancedGroup.addItem('Mermaid', {
+ icon: '',
+ label: 'Mermaid',
+ onRun: (ctx) => {
+ const commands = ctx.get(commandsCtx);
+ const codeBlock = codeBlockSchema.type(ctx);
+
+ commands.call(clearTextInCurrentBlockCommand.key);
+ commands.call(addBlockTypeCommand.key, {
+ nodeType: codeBlock,
+ attrs: { language: 'mermaid' },
+ });
+ },
+ });
+
+ const containerGroup = builder.addGroup('container', 'Container');
+ const containerItems = Object.values(ContainerType);
+
+ containerItems.forEach((item) => {
+ containerGroup.addItem(item, {
+ icon: '',
+ label: item.toUpperCase(),
+ onRun: (ctx) => {
+ const commands = ctx.get(commandsCtx);
+ const container = containerSchema.type(ctx);
+
+ commands.call(clearTextInCurrentBlockCommand.key);
+ commands.call(wrapInBlockTypeCommand.key, {
+ nodeType: container,
+ attrs: {
+ containerType: item,
+ },
+ });
+ },
+ });
+ });
+ },
+});
+
+export const getCodeMirrorConfig = (isDarkMode: boolean): CodeMirrorFeatureConfig => {
+ mermaid.initialize({ suppressErrorRendering: true, startOnLoad: false, theme: isDarkMode ? 'dark' : 'neutral' });
+
+ return {
+ theme: isDarkMode ? githubDark : githubLight,
+ renderPreview: (language, content, applyPreview) => {
+ if (language === 'mermaid' && content.trim()) {
+ const container = document.createElement('div');
+ const containerId = `mermaid-preview-container-${uid() as string}`;
+ container.setAttribute('id', containerId);
+
+ const placeholderDom = document.createElement('div');
+ placeholderDom.setAttribute('style', 'width: 100%; height: 250px;');
+ const placeholderDomId = `mermaid-preview-${uid() as string}`;
+ placeholderDom.setAttribute('id', placeholderDomId);
+ container.appendChild(placeholderDom);
+
+ const renderMermaid = async () => {
+ try {
+ const { svg, bindFunctions } = await mermaid.render(placeholderDomId, content);
+
+ applyPreview(container);
+
+ nextTick(() => {
+ // the container dom will be santified by applyPreview to another new dom
+ const santifiedContainer = document.getElementById(containerId);
+ if (!santifiedContainer) return;
+
+ santifiedContainer.innerHTML = svg;
+ bindFunctions?.(santifiedContainer);
+ });
+ } catch (e) {
+ container.innerHTML = `Error: ${
+ (e as Error).message
+ }
+
{title}
+ {showSelectorIcon && (
+
+
+ {showSelectorMenu && (
+ {
+ e.stopPropagation();
+ }}
+ >
+ {
+ selectContainerType(e.value);
+ }}
+ options={Object.keys(ContainerType)}
+ />
+
+ )}
+
+ {showEditDescIcon && (
+
+ {
+ setDescInput(value);
+ }}
+ onConfirm={() => {
+ setAttrs?.({ containerType: containerType, desc: descInput });
+ }}
+ />
+
+ )}
+
+ )}
+
{option.label}
;
+ };
+
+ const itemTemplate = (option: { label: string; value: string }) => {
+ return (
+
+
+ A
+
+
{option.label}
+
+ {
+ setSelectedColor(e.value);
+ onColorChange(e.value);
+ }}
+ />
+
+ );
+};
diff --git a/client/src/components/Editor/plugins/plugin-highlight/view/index.ts b/client/src/components/Editor/plugins/plugin-highlight/view/index.ts
new file mode 100644
index 0000000..37f4594
--- /dev/null
+++ b/client/src/components/Editor/plugins/plugin-highlight/view/index.ts
@@ -0,0 +1,147 @@
+import { editorViewCtx } from '@milkdown/kit/core';
+import { TooltipProvider } from '@milkdown/kit/plugin/tooltip';
+import { posToDOMRect } from '@milkdown/kit/prose';
+import { TextSelection } from '@milkdown/kit/prose/state';
+import { createElement } from 'react';
+import { createRoot, type Root } from 'react-dom/client';
+
+import { ColorPicker } from './ColorPicker';
+import { colorOptionsConfig, highlightSchema } from '..';
+
+import type { Ctx } from '@milkdown/kit/ctx';
+import type { Mark } from '@milkdown/kit/prose/model';
+import type { PluginView } from '@milkdown/kit/prose/state';
+import type { EditorView } from '@milkdown/kit/prose/view';
+
+import './ColorPicker.scss';
+
+interface Data {
+ from: number;
+ to: number;
+ mark: Mark | null;
+}
+
+const defaultData: Data = {
+ from: -1,
+ to: -1,
+ mark: null,
+};
+
+export class ColorPickerTooltip implements PluginView {
+ #content: HTMLElement;
+
+ #provider: TooltipProvider;
+
+ #data: Data = { ...defaultData };
+
+ #root: Root;
+
+ // #color: string;
+
+ constructor(private readonly ctx: Ctx, view: EditorView) {
+ const content = document.createElement('div');
+ content.className = 'milkdown-color-picker';
+
+ this.#content = content;
+
+ this.#root = createRoot(content);
+ this.#root.render(
+ createElement(ColorPicker, {
+ onColorChange: this.#onColorChange,
+ initialColor: '',
+ colorOptions: [],
+ }),
+ );
+
+ this.#provider = new TooltipProvider({
+ content,
+ floatingUIOptions: {
+ placement: 'bottom',
+ },
+ debounce: 0,
+ shouldShow: () => false,
+ });
+ this.#provider.onHide = () => {
+ requestAnimationFrame(() => {
+ view.dom.focus({ preventScroll: true });
+ });
+ };
+ this.#provider.update(view);
+ }
+
+ public update = (view: EditorView) => {
+ const { state } = view;
+ const { selection } = state;
+ if (!(selection instanceof TextSelection)) return;
+ const { from, to } = selection;
+ if (from === this.#data.from && to === this.#data.to) return;
+
+ this.#reset();
+ };
+
+ public destroy = () => {
+ this.#provider.destroy();
+ this.#content.remove();
+ };
+
+ public show = (mark: Mark | null, from: number, to: number) => {
+ this.#data = {
+ from,
+ to,
+ mark,
+ };
+ // this.#color = mark.attrs.color;
+ const view = this.ctx.get(editorViewCtx);
+ view.dispatch(view.state.tr.setSelection(TextSelection.create(view.state.doc, from, to)));
+ this.#root.render(
+ createElement(ColorPicker, {
+ onColorChange: this.#onColorChange,
+ initialColor: mark?.attrs.color ?? '',
+ colorOptions: this.ctx.get(colorOptionsConfig.key),
+ }),
+ );
+ this.#provider.show({
+ getBoundingClientRect: () => posToDOMRect(view, from, to),
+ });
+ };
+
+ public remove = (from: number, to: number) => {
+ const view = this.ctx.get(editorViewCtx);
+
+ const tr = view.state.tr;
+ tr.removeMark(from, to, highlightSchema.type(this.ctx));
+ view.dispatch(tr);
+
+ this.#reset();
+ };
+
+ #reset = () => {
+ this.#provider.hide();
+ this.#data = { ...defaultData };
+ };
+
+ #onColorChange = (color: string) => {
+ const { from, to, mark } = this.#data;
+
+ if (color === 'default') {
+ this.#reset();
+ this.remove(from, to);
+ return;
+ }
+
+ const view = this.ctx.get(editorViewCtx);
+ const type = highlightSchema.type(this.ctx);
+ if (mark?.attrs?.color === color) {
+ this.#reset();
+ return;
+ }
+
+ const tr = view.state.tr;
+ if (mark) tr.removeMark(from, to, mark);
+
+ tr.addMark(from, to, type.create({ color }));
+ view.dispatch(tr);
+
+ this.#reset();
+ };
+}
diff --git a/client/src/components/Editor/plugins/plugin-iframe/IframeView.tsx b/client/src/components/Editor/plugins/plugin-iframe/IframeView.tsx
new file mode 100644
index 0000000..2ac4f6f
--- /dev/null
+++ b/client/src/components/Editor/plugins/plugin-iframe/IframeView.tsx
@@ -0,0 +1,67 @@
+import { ProgressSpinner } from 'primereact/progressspinner';
+import { FC, useEffect, useId, useRef, useState } from 'react';
+
+import { TooltipInput } from '@/components/Editor/components/TooltipInput';
+
+interface IframeViewProps {
+ src: string;
+ readonly?: boolean;
+ setAttrs?: (attrs: { src: string }) => void;
+}
+
+export const IframeView: FC = ({ src, setAttrs, readonly = true }) => {
+ const uid = useId();
+ const [inputSrc, setInputSrc] = useState(src);
+ const [loading, setLoading] = useState(true);
+
+ const linkRef = useRef(null);
+
+ useEffect(() => {
+ setLoading(true);
+ }, [src]);
+
+ const showEdit = !(loading || readonly);
+
+ return (
+
+ {showEdit && (
+
{
+ setInputSrc(value);
+ }}
+ onConfirm={() => {
+ setAttrs?.({ src: inputSrc });
+ }}
+ />
+ )}
+ src && window.open(src, '_blank')}
+ >
+
+
+ {loading && (
+
+ )}
+