blixify-ui-web-mcp 0.1.47 → 0.1.48
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import React, { useState } from "react";
|
|
2
2
|
import { MarkdownInput as MarkdownInputImpl, MarkdownStatic } from ".";
|
|
3
|
+
import { NewTable } from "../../display/newTable";
|
|
3
4
|
import { StorySection } from "../../storyUtils";
|
|
4
5
|
|
|
5
6
|
const meta = { title: "Input/Markdown/Input" };
|
|
@@ -21,7 +22,7 @@ const DIAGRAM_SAMPLE = [
|
|
|
21
22
|
export const MarkdownInput = () => {
|
|
22
23
|
const [value, setValue] = useState<string | undefined>("");
|
|
23
24
|
const [noteValue, setNoteValue] = useState<string | undefined>(
|
|
24
|
-
'A page can hold a live database, not just a link to one.\n\n<div data-space-id="orders"></div>\n\nType / on any line and pick Database to add another.',
|
|
25
|
+
'A page can hold a live database, not just a link to one.\n\n<div data-space-id="orders"></div>\n\nType / on any line and pick Database to add another. A table written in the page keeps its own look:\n\n| Item | Qty |\n| --- | --- |\n| Panels | 12 |',
|
|
25
26
|
);
|
|
26
27
|
const [diagramValue, setDiagramValue] = useState<string | undefined>(
|
|
27
28
|
DIAGRAM_SAMPLE,
|
|
@@ -76,15 +77,25 @@ export const MarkdownInput = () => {
|
|
|
76
77
|
// INFO: stands in for the host's confirmation modal
|
|
77
78
|
if (window.confirm(`Remove ${spaceId} from this page?`)) remove();
|
|
78
79
|
}}
|
|
80
|
+
// INFO: a real table, so the page's own table styles can be seen
|
|
81
|
+
// not to reach it
|
|
79
82
|
renderEmbed={(spaceId, actions) => (
|
|
80
|
-
<div
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
83
|
+
<div data-testid="embed-render">
|
|
84
|
+
<NewTable
|
|
85
|
+
columns={[
|
|
86
|
+
{ key: "order", title: "Order", type: "string" },
|
|
87
|
+
{ key: "status", title: "Status", type: "string" },
|
|
88
|
+
]}
|
|
89
|
+
data={[
|
|
90
|
+
{ id: "1", order: spaceId, status: "Pending" },
|
|
91
|
+
{ id: "2", order: `${spaceId}-2`, status: "Delivered" },
|
|
92
|
+
]}
|
|
93
|
+
enableCopy={false}
|
|
94
|
+
advSettings={{ flat: true }}
|
|
95
|
+
/>
|
|
85
96
|
<button
|
|
86
97
|
data-testid="embed-remove"
|
|
87
|
-
className="
|
|
98
|
+
className="mt-2 text-sm text-primary-700 underline"
|
|
88
99
|
onClick={actions.onRemove}
|
|
89
100
|
>
|
|
90
101
|
Remove
|
|
@@ -112,7 +123,7 @@ export const MarkdownInput = () => {
|
|
|
112
123
|
|
|
113
124
|
<StorySection
|
|
114
125
|
title="Text size sm"
|
|
115
|
-
description="
|
|
126
|
+
description='textSize="sm" gives 14px text on every screen. On phones the editor keeps a real 16px font drawn with transform: scale(0.875), the same trick as TextInput xs, so iOS Safari does not zoom on focus. CSS zoom would still trigger the zoom. MarkdownStatic takes the same prop.'
|
|
116
127
|
>
|
|
117
128
|
<div className="grid w-full gap-6 md:grid-cols-2">
|
|
118
129
|
<MarkdownInputImpl
|