fix: use editable workaround for blocks

This commit is contained in:
swve 2024-01-07 18:15:32 +01:00
parent a05b298c91
commit 21f1f2fd94
10 changed files with 36 additions and 14 deletions

View file

@ -1,13 +1,17 @@
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import { AlertCircle } from "lucide-react";
import React from "react";
import styled from "styled-components";
function InfoCalloutComponent(props: any) {
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
return (
<NodeViewWrapper>
<InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
<AlertCircle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
<InfoCalloutWrapper className="flex space-x-2 items-center bg-blue-200 rounded-lg text-blue-900 px-3 shadow-inner" contentEditable={isEditable}>
<AlertCircle /> <NodeViewContent contentEditable={isEditable} className="content" />
</InfoCalloutWrapper>
</NodeViewWrapper>
);

View file

@ -8,8 +8,6 @@ export default Node.create({
group: "block",
draggable: true,
content: "text*",
marks: "",
defining: true,
// TODO : multi line support

View file

@ -1,13 +1,17 @@
import { useEditorProvider } from "@components/Contexts/Editor/EditorContext";
import { NodeViewContent, NodeViewWrapper } from "@tiptap/react";
import { AlertTriangle } from "lucide-react";
import React from "react";
import styled from "styled-components";
function WarningCalloutComponent(props: any) {
const editorState = useEditorProvider() as any;
const isEditable = editorState.isEditable;
return (
<NodeViewWrapper>
<CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={props.extension.options.editable}>
<AlertTriangle /> <NodeViewContent contentEditable={props.extension.options.editable} className="content" />
<CalloutWrapper className="flex space-x-2 items-center bg-yellow-200 rounded-lg text-yellow-900 px-3 shadow-inner" contentEditable={isEditable}>
<AlertTriangle /> <NodeViewContent contentEditable={isEditable} className="content" />
</CalloutWrapper>
</NodeViewWrapper>
);