fix: updated extensions in read only instance of the editor (#3925)

This commit is contained in:
M. Palanikannan 2024-03-11 21:05:27 +05:30 committed by GitHub
parent 01702e9f66
commit d34df5c805
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 24 additions and 24 deletions

View File

@ -27,7 +27,7 @@ import { RestoreImage } from "src/types/restore-image";
import { CustomLinkExtension } from "src/ui/extensions/custom-link"; import { CustomLinkExtension } from "src/ui/extensions/custom-link";
import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline"; import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
import { CustomTypographyExtension } from "src/ui/extensions/typography"; import { CustomTypographyExtension } from "src/ui/extensions/typography";
import { CustomHorizontalRule } from "./horizontal-rule/horizontal-rule"; import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
export const CoreEditorExtensions = ( export const CoreEditorExtensions = (
mentionConfig: { mentionConfig: {
@ -66,7 +66,6 @@ export const CoreEditorExtensions = (
CustomQuoteExtension.configure({ CustomQuoteExtension.configure({
HTMLAttributes: { className: "border-l-4 border-custom-border-300" }, HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
}), }),
CustomHorizontalRule.configure({ CustomHorizontalRule.configure({
HTMLAttributes: { class: "mt-4 mb-4" }, HTMLAttributes: { class: "mt-4 mb-4" },
}), }),

View File

@ -5,7 +5,6 @@ import { Color } from "@tiptap/extension-color";
import TaskItem from "@tiptap/extension-task-item"; import TaskItem from "@tiptap/extension-task-item";
import TaskList from "@tiptap/extension-task-list"; import TaskList from "@tiptap/extension-task-list";
import { Markdown } from "tiptap-markdown"; import { Markdown } from "tiptap-markdown";
import Gapcursor from "@tiptap/extension-gapcursor";
import { TableHeader } from "src/ui/extensions/table/table-header/table-header"; import { TableHeader } from "src/ui/extensions/table/table-header/table-header";
import { Table } from "src/ui/extensions/table/table"; import { Table } from "src/ui/extensions/table/table";
@ -17,6 +16,11 @@ import { isValidHttpUrl } from "src/lib/utils";
import { Mentions } from "src/ui/mentions"; import { Mentions } from "src/ui/mentions";
import { IMentionSuggestion } from "src/types/mention-suggestion"; import { IMentionSuggestion } from "src/types/mention-suggestion";
import { CustomLinkExtension } from "src/ui/extensions/custom-link"; import { CustomLinkExtension } from "src/ui/extensions/custom-link";
import { CustomHorizontalRule } from "src/ui/extensions/horizontal-rule/horizontal-rule";
import { CustomQuoteExtension } from "src/ui/extensions/quote";
import { CustomTypographyExtension } from "src/ui/extensions/typography";
import { CustomCodeBlockExtension } from "src/ui/extensions/code";
import { CustomCodeInlineExtension } from "src/ui/extensions/code-inline";
export const CoreReadOnlyEditorExtensions = (mentionConfig: { export const CoreReadOnlyEditorExtensions = (mentionConfig: {
mentionSuggestions: IMentionSuggestion[]; mentionSuggestions: IMentionSuggestion[];
@ -38,36 +42,31 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
class: "leading-normal -mb-2", class: "leading-normal -mb-2",
}, },
}, },
blockquote: { code: false,
HTMLAttributes: {
class: "border-l-4 border-custom-border-300",
},
},
code: {
HTMLAttributes: {
class: "rounded-md bg-custom-primary-30 mx-1 px-1 py-1 font-mono font-medium text-custom-text-1000",
spellcheck: "false",
},
},
codeBlock: false, codeBlock: false,
horizontalRule: { horizontalRule: false,
HTMLAttributes: { class: "mt-4 mb-4" }, blockquote: false,
}, dropcursor: false,
dropcursor: {
color: "rgba(var(--color-text-100))",
width: 2,
},
gapcursor: false, gapcursor: false,
}), }),
Gapcursor, CustomQuoteExtension.configure({
HTMLAttributes: { className: "border-l-4 border-custom-border-300" },
}),
CustomHorizontalRule.configure({
HTMLAttributes: { class: "mt-4 mb-4" },
}),
CustomLinkExtension.configure({ CustomLinkExtension.configure({
openOnClick: true,
autolink: true,
linkOnPaste: true,
protocols: ["http", "https"], protocols: ["http", "https"],
validate: (url) => isValidHttpUrl(url), validate: (url: string) => isValidHttpUrl(url),
HTMLAttributes: { HTMLAttributes: {
class: class:
"text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer", "text-custom-primary-300 underline underline-offset-[3px] hover:text-custom-primary-500 transition-colors cursor-pointer",
}, },
}), }),
CustomTypographyExtension,
ReadOnlyImageExtension.configure({ ReadOnlyImageExtension.configure({
HTMLAttributes: { HTMLAttributes: {
class: "rounded-lg border border-custom-border-300", class: "rounded-lg border border-custom-border-300",
@ -87,6 +86,8 @@ export const CoreReadOnlyEditorExtensions = (mentionConfig: {
}, },
nested: true, nested: true,
}), }),
CustomCodeBlockExtension,
CustomCodeInlineExtension,
Markdown.configure({ Markdown.configure({
html: true, html: true,
transformCopiedText: true, transformCopiedText: true,

View File

@ -113,7 +113,7 @@ const DocumentReadOnlyEditor = ({
tabIndex={tabIndex} tabIndex={tabIndex}
onActionCompleteHandler={onActionCompleteHandler} onActionCompleteHandler={onActionCompleteHandler}
updatePageTitle={() => Promise.resolve()} updatePageTitle={() => Promise.resolve()}
readonly={true} readonly
editor={editor} editor={editor}
editorClassNames={editorClassNames} editorClassNames={editorClassNames}
documentDetails={documentDetails} documentDetails={documentDetails}