{props.type === "text"
@@ -496,7 +503,7 @@ const useMentionState = (entityID: string) => {
// Find the relative positioned parent container
const editorEl = view.dom;
- const container = editorEl.closest('.relative') as HTMLElement | null;
+ const container = editorEl.closest(".relative") as HTMLElement | null;
if (container) {
const containerRect = container.getBoundingClientRect();
diff --git a/components/Toolbar/TextBlockTypeToolbar.tsx b/components/Toolbar/TextBlockTypeToolbar.tsx
index 2a872264..c3af36ee 100644
--- a/components/Toolbar/TextBlockTypeToolbar.tsx
+++ b/components/Toolbar/TextBlockTypeToolbar.tsx
@@ -4,7 +4,7 @@ import {
Header3Small,
} from "components/Icons/BlockTextSmall";
import { Props } from "components/Icons/Props";
-import { ShortcutKey } from "components/Layout";
+import { ShortcutKey, Separator } from "components/Layout";
import { ToolbarButton } from "components/Toolbar";
import { TextSelection } from "prosemirror-state";
import { useCallback } from "react";
@@ -22,6 +22,8 @@ export const TextBlockTypeToolbar = (props: {
focusedBlock?.entityID || null,
"block/heading-level",
);
+
+ let textSize = useEntity(focusedBlock?.entityID || null, "block/text-size");
let { rep } = useReplicache();
let setLevel = useCallback(
@@ -51,106 +53,133 @@ export const TextBlockTypeToolbar = (props: {
);
return (
// This Toolbar should close once the user starts typing again
-
-
-
{
- setLevel(1);
- }}
- active={
- blockType?.data.value === "heading" &&
- headingLevel?.data.value === 1
- }
- tooltipContent={
-
-
Title
-
- start line with
- #
-
+ <>
+
{
+ setLevel(1);
+ }}
+ active={
+ blockType?.data.value === "heading" && headingLevel?.data.value === 1
+ }
+ tooltipContent={
+
+
Title
+
+ start line with
+ #
- }
- >
-
-
-
{
- setLevel(2);
- }}
- active={
- blockType?.data.value === "heading" &&
- headingLevel?.data.value === 2
- }
- tooltipContent={
-
-
Heading
-
- start line with
- ##
-
+
+
{
+ setLevel(2);
+ }}
+ active={
+ blockType?.data.value === "heading" && headingLevel?.data.value === 2
+ }
+ tooltipContent={
+
+
Heading
+
+ start line with
+ ##
- }
- >
-
-
-
{
- setLevel(3);
- }}
- active={
- blockType?.data.value === "heading" &&
- headingLevel?.data.value === 3
- }
- tooltipContent={
-
-
Subheading
-
- start line with
- ###
-
+
+
{
+ setLevel(3);
+ }}
+ active={
+ blockType?.data.value === "heading" && headingLevel?.data.value === 3
+ }
+ tooltipContent={
+
+
Subheading
+
+ start line with
+ ###
+
+
+
{
+ if (headingLevel)
+ await rep?.mutate.retractFact({ factID: headingLevel.id });
+ if (textSize) await rep?.mutate.retractFact({ factID: textSize.id });
+ if (!focusedBlock || !blockType) return;
+ if (blockType.data.value !== "text") {
+ let existingEditor =
+ useEditorStates.getState().editorStates[focusedBlock.entityID];
+ let selection = existingEditor?.editor.selection;
+ await rep?.mutate.assertFact({
+ entity: focusedBlock?.entityID,
+ attribute: "block/type",
+ data: { type: "block-type-union", value: "text" },
+ });
+
+ let newEditor =
+ useEditorStates.getState().editorStates[focusedBlock.entityID];
+ if (!newEditor || !selection) return;
+ newEditor.view?.dispatch(
+ newEditor.editor.tr.setSelection(
+ TextSelection.create(newEditor.editor.doc, selection.anchor),
+ ),
+ );
+
+ newEditor.view?.focus();
}
- >
-
-
-
{
+ }}
+ active={
+ blockType?.data.value === "text" && textSize?.data.value !== "small"
+ }
+ tooltipContent={Normal Text
}
+ >
+ Text
+
+
{
+ if (!focusedBlock || !blockType) return;
+ if (blockType.data.value !== "text") {
+ // Convert to text block first if it's a heading
if (headingLevel)
await rep?.mutate.retractFact({ factID: headingLevel.id });
- if (!focusedBlock || !blockType) return;
- if (blockType.data.value !== "text") {
- let existingEditor =
- useEditorStates.getState().editorStates[focusedBlock.entityID];
- let selection = existingEditor?.editor.selection;
- await rep?.mutate.assertFact({
- entity: focusedBlock?.entityID,
- attribute: "block/type",
- data: { type: "block-type-union", value: "text" },
- });
-
- let newEditor =
- useEditorStates.getState().editorStates[focusedBlock.entityID];
- if (!newEditor || !selection) return;
- newEditor.view?.dispatch(
- newEditor.editor.tr.setSelection(
- TextSelection.create(newEditor.editor.doc, selection.anchor),
- ),
- );
-
- newEditor.view?.focus();
- }
- }}
- active={blockType?.data.value === "text"}
- tooltipContent={Paragraph
}
- >
- Paragraph
-
-
Small Text
}
+ >
+ Small
+
+
);
};
diff --git a/src/replicache/attributes.ts b/src/replicache/attributes.ts
index a902d078..adcf52c8 100644
--- a/src/replicache/attributes.ts
+++ b/src/replicache/attributes.ts
@@ -71,6 +71,10 @@ const BlockAttributes = {
type: "number",
cardinality: "one",
},
+ "block/text-size": {
+ type: "text-size-union",
+ cardinality: "one",
+ },
"block/image": {
type: "image",
cardinality: "one",
@@ -318,6 +322,10 @@ export type Data
= {
type: "text-alignment-type-union";
value: "right" | "left" | "center" | "justify";
};
+ "text-size-union": {
+ type: "text-size-union";
+ value: "default" | "small";
+ };
"page-type-union": { type: "page-type-union"; value: "doc" | "canvas" };
"block-type-union": {
type: "block-type-union";
diff --git a/src/utils/getBlocksAsHTML.tsx b/src/utils/getBlocksAsHTML.tsx
index 235735ba..0f2c4003 100644
--- a/src/utils/getBlocksAsHTML.tsx
+++ b/src/utils/getBlocksAsHTML.tsx
@@ -171,11 +171,13 @@ const BlockTypeToHTML: {
},
text: async (b, tx, a) => {
let [value] = await scanIndex(tx).eav(b.value, "block/text");
+ let [textSize] = await scanIndex(tx).eav(b.value, "block/text-size");
return (