thunderstrike/plane
2
0
Fork 0
forked from github/plane
Code Pull Requests Activity

style: lite text editor editor toolbar (#2601)

Browse Source 
* style: comment editor toolbar

* style: updated icon styling
This commit is contained in:
Aaryan Khandelwal
2023-11-02 16:26:57 +05:30
committed by GitHub
parent 5b808571e5
commit c394a4f64e
6 changed files with 182 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/editor/core/src/ui/components/editor-container.tsx
View File

@@ -7,7 +7,11 @@ interface EditorContainerProps {
children: ReactNode;
}
export const EditorContainer = ({ editor, editorClassNames, children }: EditorContainerProps) => (
export const EditorContainer = ({
editor,
editorClassNames,
children,
}: EditorContainerProps) => (
<div
id="editor-container"
onClick={() => {

43
packages/editor/core/src/ui/index.tsx
View File

@@ -1,14 +1,14 @@
"use client"
import * as React from 'react';
"use client";
import * as React from "react";
import { Extension } from "@tiptap/react";
import { UploadImage } from '../types/upload-image';
import { DeleteImage } from '../types/delete-image';
import { getEditorClassNames } from '../lib/utils';
import { EditorProps } from '@tiptap/pm/view';
import { useEditor } from './hooks/useEditor';
import { EditorContainer } from '../ui/components/editor-container';
import { EditorContentWrapper } from '../ui/components/editor-content';
import { IMentionSuggestion } from '../types/mention-suggestion';
import { UploadImage } from "../types/upload-image";
import { DeleteImage } from "../types/delete-image";
import { getEditorClassNames } from "../lib/utils";
import { EditorProps } from "@tiptap/pm/view";
import { useEditor } from "./hooks/useEditor";
import { EditorContainer } from "../ui/components/editor-container";
import { EditorContentWrapper } from "../ui/components/editor-content";
import { IMentionSuggestion } from "../types/mention-suggestion";
interface ICoreEditor {
value: string;
@@ -19,7 +19,9 @@ interface ICoreEditor {
customClassName?: string;
editorContentCustomClassNames?: string;
onChange?: (json: any, html: string) => void;
setIsSubmitting?: (isSubmitting: "submitting" | "submitted" | "saved") => void;
setIsSubmitting?: (
isSubmitting: "submitting" | "submitted" | "saved",
) => void;
setShouldShowAlert?: (showAlert: boolean) => void;
editable?: boolean;
forwardedRef?: any;
@@ -72,22 +74,29 @@ const CoreEditor = ({
forwardedRef,
});
const editorClassNames = getEditorClassNames({ noBorder, borderOnFocus, customClassName });
const editorClassNames = getEditorClassNames({
noBorder,
borderOnFocus,
customClassName,
});
if (!editor) return null;
return (
<EditorContainer editor={editor} editorClassNames={editorClassNames}>
<div className="flex flex-col">
<EditorContentWrapper editor={editor} editorContentCustomClassNames={editorContentCustomClassNames} />
<EditorContentWrapper
editor={editor}
editorContentCustomClassNames={editorContentCustomClassNames}
/>
</div>
</EditorContainer >
</EditorContainer>
);
};
const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>((props, ref) => (
<CoreEditor {...props} forwardedRef={ref} />
));
const CoreEditorWithRef = React.forwardRef<EditorHandle, ICoreEditor>(
(props, ref) => <CoreEditor {...props} forwardedRef={ref} />,
);
CoreEditorWithRef.displayName = "CoreEditorWithRef";