style: page title and checkbox

makeplane · Dec 17, 2024 · a7ddf3d · a7ddf3d
1 parent 7959a19
commit a7ddf3d
Show file tree

Hide file tree

Showing 8 changed files with 12 additions and 186 deletions.
diff --git a/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx b/packages/editor/src/core/components/editors/document/collaborative-read-only-editor.tsx
diff --git a/packages/editor/src/core/components/editors/document/index.ts b/packages/editor/src/core/components/editors/document/index.ts
@@ -1,5 +1,4 @@
 export * from "./collaborative-editor";
-export * from "./collaborative-read-only-editor";
 export * from "./loader";
 export * from "./page-renderer";
 export * from "./read-only-editor";
diff --git a/packages/editor/src/core/extensions/extensions.tsx b/packages/editor/src/core/extensions/extensions.tsx
@@ -138,6 +138,7 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     CustomCodeInlineExtension,
     Markdown.configure({
       html: true,
+      transformCopiedText: true,
       transformPastedText: true,
       breaks: true,
     }),
@@ -152,6 +153,8 @@ export const CoreEditorExtensions = (args: TArguments): Extensions => {
     }),
     Placeholder.configure({
       placeholder: ({ editor, node }) => {
+        if (!editor.isEditable) return;
+
         if (node.type.name === "heading") return `Heading ${node.attrs.level}`;
 
         if (editor.storage.imageComponent.uploadInProgress) return "";

diff --git a/packages/editor/src/core/extensions/read-only-extensions.tsx b/packages/editor/src/core/extensions/read-only-extensions.tsx
@@ -20,7 +20,6 @@ import {
   TableRow,
   Table,
   CustomMention,
-  HeadingListExtension,
   CustomReadOnlyImageExtension,
   CustomTextAlignExtension,
   CustomCalloutReadOnlyExtension,
@@ -139,7 +138,6 @@ export const CoreReadOnlyEditorExtensions = (props: Props): Extensions => {
     }),
     CharacterCount,
     CustomColorExtension,
-    HeadingListExtension,
     CustomTextAlignExtension,
     CustomCalloutReadOnlyExtension,
     ...CoreReadOnlyEditorAdditionalExtensions({

diff --git a/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts b/packages/editor/src/core/hooks/use-read-only-collaborative-editor.ts
diff --git a/packages/editor/src/index.ts b/packages/editor/src/index.ts
@@ -9,7 +9,6 @@ import "./styles/drag-drop.css";
 // editors
 export {
   CollaborativeDocumentEditorWithRef,
-  CollaborativeDocumentReadOnlyEditorWithRef,
   DocumentReadOnlyEditorWithRef,
   LiteTextEditorWithRef,
   LiteTextReadOnlyEditorWithRef,

diff --git a/packages/editor/src/styles/editor.css b/packages/editor/src/styles/editor.css
@@ -111,8 +111,12 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   transform: scale(1.05);
 }
 
-ul[data-type="taskList"] li > label input[type="checkbox"]:hover {
-  background-color: rgba(var(--color-background-80)) !important;
+.ProseMirror[contenteditable="true"] input[type="checkbox"]:hover {
+  background-color: rgba(var(--color-background-80));
+}
+
+.ProseMirror[contenteditable="false"] input[type="checkbox"] {
+  pointer-events: none;
 }
 
 ul[data-type="taskList"] li > label input[type="checkbox"][checked] {
@@ -151,10 +155,6 @@ ul[data-type="taskList"] li > label input[type="checkbox"] {
   margin-right: 0.2rem;
   margin-top: 0.15rem;
 
-  &:hover {
-    background-color: rgb(var(--color-background-80));
-  }
-
   &:active {
     background-color: rgb(var(--color-background-90));
   }

diff --git a/web/core/components/pages/editor/editor-body.tsx b/web/core/components/pages/editor/editor-body.tsx
@@ -166,13 +166,13 @@ export const PageEditorBody: React.FC<Props> = observer((props) => {
         {!isFullWidth && <PageContentBrowser editorRef={editorRef.current} />}
       </Row>
       <div
-        className={cn("h-full w-full pt-5 duration-200", {
+        className={cn("size-full pt-5 duration-200", {
           "md:w-[calc(100%-10rem)] xl:w-[calc(100%-28rem)]": !isFullWidth,
           "md:w-[90%]": isFullWidth,
         })}
       >
-        <div className="h-full w-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
-          <div className="relative w-full flex-shrink-0 md:pl-5 px-4">
+        <div className="size-full flex flex-col gap-y-7 overflow-y-auto overflow-x-hidden">
+          <div className="relative w-full flex-shrink-0 md:pl-5 px-4 h-[38px]">
             <PageEditorTitle
               editorRef={editorRef}
               title={pageTitle}