@portabletext/editor 1.4.1 → 1.5.1
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.
- package/README.md +341 -1
- package/lib/index.d.mts +106 -29
- package/lib/index.d.ts +106 -29
- package/lib/index.esm.js +119 -63
- package/lib/index.esm.js.map +1 -1
- package/lib/index.js +118 -63
- package/lib/index.js.map +1 -1
- package/lib/index.mjs +119 -63
- package/lib/index.mjs.map +1 -1
- package/package.json +4 -2
- package/src/editor/PortableTextEditor.tsx +8 -11
- package/src/editor/define-schema.ts +111 -0
- package/src/editor/plugins/createWithEditableAPI.ts +11 -5
- package/src/editor/use-editor.ts +19 -7
- package/src/index.ts +11 -5
- package/src/types/editor.ts +9 -9
package/lib/index.mjs
CHANGED
|
@@ -1,4 +1,6 @@
|
|
|
1
|
-
import { isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, isKeySegment, isPortableTextListBlock } from "@sanity/types";
|
|
1
|
+
import { isPortableTextTextBlock, isPortableTextSpan as isPortableTextSpan$1, isKeySegment, defineType, defineField, isPortableTextListBlock } from "@sanity/types";
|
|
2
|
+
import { Schema } from "@sanity/schema";
|
|
3
|
+
import startCase from "lodash.startcase";
|
|
2
4
|
import { jsx, Fragment, jsxs } from "react/jsx-runtime";
|
|
3
5
|
import isEqual from "lodash/isEqual.js";
|
|
4
6
|
import noop from "lodash/noop.js";
|
|
@@ -11,7 +13,6 @@ import { styled } from "styled-components";
|
|
|
11
13
|
import uniq from "lodash/uniq.js";
|
|
12
14
|
import { Subject } from "rxjs";
|
|
13
15
|
import { fromCallback, setup, assign, assertEvent, emit, enqueueActions, createActor } from "xstate";
|
|
14
|
-
import { Schema } from "@sanity/schema";
|
|
15
16
|
import { diffMatchPatch as diffMatchPatch$1, set, insert, setIfMissing, unset, applyAll } from "@portabletext/patches";
|
|
16
17
|
import get from "lodash/get.js";
|
|
17
18
|
import isUndefined from "lodash/isUndefined.js";
|
|
@@ -265,6 +266,114 @@ function createMarkdownBehaviors(config) {
|
|
|
265
266
|
};
|
|
266
267
|
return [automaticStyleOnSpace, clearStyleOnBackspace, automaticListOnSpace];
|
|
267
268
|
}
|
|
269
|
+
function getPortableTextMemberSchemaTypes(portableTextType) {
|
|
270
|
+
if (!portableTextType)
|
|
271
|
+
throw new Error("Parameter 'portabletextType' missing (required)");
|
|
272
|
+
const blockType = portableTextType.of?.find(findBlockType);
|
|
273
|
+
if (!blockType)
|
|
274
|
+
throw new Error("Block type is not defined in this schema (required)");
|
|
275
|
+
const childrenField = blockType.fields?.find((field) => field.name === "children");
|
|
276
|
+
if (!childrenField)
|
|
277
|
+
throw new Error("Children field for block type found in schema (required)");
|
|
278
|
+
const ofType = childrenField.type.of;
|
|
279
|
+
if (!ofType)
|
|
280
|
+
throw new Error("Valid types for block children not found in schema (required)");
|
|
281
|
+
const spanType = ofType.find((memberType) => memberType.name === "span");
|
|
282
|
+
if (!spanType)
|
|
283
|
+
throw new Error("Span type not found in schema (required)");
|
|
284
|
+
const inlineObjectTypes = ofType.filter((memberType) => memberType.name !== "span") || [], blockObjectTypes = portableTextType.of?.filter((field) => field.name !== blockType.name) || [];
|
|
285
|
+
return {
|
|
286
|
+
styles: resolveEnabledStyles(blockType),
|
|
287
|
+
decorators: resolveEnabledDecorators(spanType),
|
|
288
|
+
lists: resolveEnabledListItems(blockType),
|
|
289
|
+
block: blockType,
|
|
290
|
+
span: spanType,
|
|
291
|
+
portableText: portableTextType,
|
|
292
|
+
inlineObjects: inlineObjectTypes,
|
|
293
|
+
blockObjects: blockObjectTypes,
|
|
294
|
+
annotations: spanType.annotations
|
|
295
|
+
};
|
|
296
|
+
}
|
|
297
|
+
function resolveEnabledStyles(blockType) {
|
|
298
|
+
const styleField = blockType.fields?.find((btField) => btField.name === "style");
|
|
299
|
+
if (!styleField)
|
|
300
|
+
throw new Error("A field with name 'style' is not defined in the block type (required).");
|
|
301
|
+
const textStyles = styleField.type.options?.list && styleField.type.options.list?.filter((style) => style.value);
|
|
302
|
+
if (!textStyles || textStyles.length === 0)
|
|
303
|
+
throw new Error("The style fields need at least one style defined. I.e: {title: 'Normal', value: 'normal'}.");
|
|
304
|
+
return textStyles;
|
|
305
|
+
}
|
|
306
|
+
function resolveEnabledDecorators(spanType) {
|
|
307
|
+
return spanType.decorators;
|
|
308
|
+
}
|
|
309
|
+
function resolveEnabledListItems(blockType) {
|
|
310
|
+
const listField = blockType.fields?.find((btField) => btField.name === "listItem");
|
|
311
|
+
if (!listField)
|
|
312
|
+
throw new Error("A field with name 'listItem' is not defined in the block type (required).");
|
|
313
|
+
const listItems = listField.type.options?.list && listField.type.options.list.filter((list) => list.value);
|
|
314
|
+
if (!listItems)
|
|
315
|
+
throw new Error("The list field need at least to be an empty array");
|
|
316
|
+
return listItems;
|
|
317
|
+
}
|
|
318
|
+
function findBlockType(type) {
|
|
319
|
+
return type.type ? findBlockType(type.type) : type.name === "block" ? type : null;
|
|
320
|
+
}
|
|
321
|
+
function defineSchema(definition) {
|
|
322
|
+
return definition;
|
|
323
|
+
}
|
|
324
|
+
function compileSchemaDefinition(definition) {
|
|
325
|
+
const blockObjects = definition?.blockObjects?.map((blockObject) => defineType({
|
|
326
|
+
type: "object",
|
|
327
|
+
name: blockObject.name,
|
|
328
|
+
title: blockObject.title,
|
|
329
|
+
icon: blockObject.icon,
|
|
330
|
+
fields: []
|
|
331
|
+
})) ?? [], inlineObjects = definition?.inlineObjects?.map((inlineObject) => defineType({
|
|
332
|
+
type: "object",
|
|
333
|
+
name: inlineObject.name,
|
|
334
|
+
title: inlineObject.title,
|
|
335
|
+
icon: inlineObject.icon,
|
|
336
|
+
fields: []
|
|
337
|
+
})) ?? [], portableTextSchema = defineField({
|
|
338
|
+
type: "array",
|
|
339
|
+
name: "portable-text",
|
|
340
|
+
of: [...blockObjects.map((blockObject) => ({
|
|
341
|
+
type: blockObject.name
|
|
342
|
+
})), {
|
|
343
|
+
type: "block",
|
|
344
|
+
name: "block",
|
|
345
|
+
of: inlineObjects.map((inlineObject) => ({
|
|
346
|
+
type: inlineObject.name
|
|
347
|
+
})),
|
|
348
|
+
marks: {
|
|
349
|
+
decorators: definition?.decorators?.map((decorator) => ({
|
|
350
|
+
title: decorator.title ?? startCase(decorator.name),
|
|
351
|
+
value: decorator.name,
|
|
352
|
+
icon: decorator.icon
|
|
353
|
+
})) ?? [],
|
|
354
|
+
annotations: definition?.annotations?.map((annotation) => ({
|
|
355
|
+
name: annotation.name,
|
|
356
|
+
type: "object",
|
|
357
|
+
title: annotation.title,
|
|
358
|
+
icon: annotation.icon
|
|
359
|
+
})) ?? []
|
|
360
|
+
},
|
|
361
|
+
lists: definition?.lists?.map((list) => ({
|
|
362
|
+
value: list.name,
|
|
363
|
+
title: list.title ?? startCase(list.name),
|
|
364
|
+
icon: list.icon
|
|
365
|
+
})) ?? [],
|
|
366
|
+
styles: definition?.styles?.map((style) => ({
|
|
367
|
+
value: style.name,
|
|
368
|
+
title: style.title ?? startCase(style.name),
|
|
369
|
+
icon: style.icon
|
|
370
|
+
})) ?? []
|
|
371
|
+
}]
|
|
372
|
+
}), schema = Schema.compile({
|
|
373
|
+
types: [portableTextSchema, ...blockObjects, ...inlineObjects]
|
|
374
|
+
}).get("portable-text");
|
|
375
|
+
return getPortableTextMemberSchemaTypes(schema);
|
|
376
|
+
}
|
|
268
377
|
const rootName = "sanity-pte:";
|
|
269
378
|
debug$m(rootName);
|
|
270
379
|
function debugWithName(name) {
|
|
@@ -955,58 +1064,6 @@ function DefaultAnnotation(props) {
|
|
|
955
1064
|
return $[3] !== handleClick || $[4] !== props.children ? (t2 = /* @__PURE__ */ jsx("span", { style: t1, onClick: handleClick, children: props.children }), $[3] = handleClick, $[4] = props.children, $[5] = t2) : t2 = $[5], t2;
|
|
956
1065
|
}
|
|
957
1066
|
DefaultAnnotation.displayName = "DefaultAnnotation";
|
|
958
|
-
function getPortableTextMemberSchemaTypes(portableTextType) {
|
|
959
|
-
if (!portableTextType)
|
|
960
|
-
throw new Error("Parameter 'portabletextType' missing (required)");
|
|
961
|
-
const blockType = portableTextType.of?.find(findBlockType);
|
|
962
|
-
if (!blockType)
|
|
963
|
-
throw new Error("Block type is not defined in this schema (required)");
|
|
964
|
-
const childrenField = blockType.fields?.find((field) => field.name === "children");
|
|
965
|
-
if (!childrenField)
|
|
966
|
-
throw new Error("Children field for block type found in schema (required)");
|
|
967
|
-
const ofType = childrenField.type.of;
|
|
968
|
-
if (!ofType)
|
|
969
|
-
throw new Error("Valid types for block children not found in schema (required)");
|
|
970
|
-
const spanType = ofType.find((memberType) => memberType.name === "span");
|
|
971
|
-
if (!spanType)
|
|
972
|
-
throw new Error("Span type not found in schema (required)");
|
|
973
|
-
const inlineObjectTypes = ofType.filter((memberType) => memberType.name !== "span") || [], blockObjectTypes = portableTextType.of?.filter((field) => field.name !== blockType.name) || [];
|
|
974
|
-
return {
|
|
975
|
-
styles: resolveEnabledStyles(blockType),
|
|
976
|
-
decorators: resolveEnabledDecorators(spanType),
|
|
977
|
-
lists: resolveEnabledListItems(blockType),
|
|
978
|
-
block: blockType,
|
|
979
|
-
span: spanType,
|
|
980
|
-
portableText: portableTextType,
|
|
981
|
-
inlineObjects: inlineObjectTypes,
|
|
982
|
-
blockObjects: blockObjectTypes,
|
|
983
|
-
annotations: spanType.annotations
|
|
984
|
-
};
|
|
985
|
-
}
|
|
986
|
-
function resolveEnabledStyles(blockType) {
|
|
987
|
-
const styleField = blockType.fields?.find((btField) => btField.name === "style");
|
|
988
|
-
if (!styleField)
|
|
989
|
-
throw new Error("A field with name 'style' is not defined in the block type (required).");
|
|
990
|
-
const textStyles = styleField.type.options?.list && styleField.type.options.list?.filter((style) => style.value);
|
|
991
|
-
if (!textStyles || textStyles.length === 0)
|
|
992
|
-
throw new Error("The style fields need at least one style defined. I.e: {title: 'Normal', value: 'normal'}.");
|
|
993
|
-
return textStyles;
|
|
994
|
-
}
|
|
995
|
-
function resolveEnabledDecorators(spanType) {
|
|
996
|
-
return spanType.decorators;
|
|
997
|
-
}
|
|
998
|
-
function resolveEnabledListItems(blockType) {
|
|
999
|
-
const listField = blockType.fields?.find((btField) => btField.name === "listItem");
|
|
1000
|
-
if (!listField)
|
|
1001
|
-
throw new Error("A field with name 'listItem' is not defined in the block type (required).");
|
|
1002
|
-
const listItems = listField.type.options?.list && listField.type.options.list.filter((list) => list.value);
|
|
1003
|
-
if (!listItems)
|
|
1004
|
-
throw new Error("The list field need at least to be an empty array");
|
|
1005
|
-
return listItems;
|
|
1006
|
-
}
|
|
1007
|
-
function findBlockType(type) {
|
|
1008
|
-
return type.type ? findBlockType(type.type) : type.name === "block" ? type : null;
|
|
1009
|
-
}
|
|
1010
1067
|
function compileType(rawType) {
|
|
1011
1068
|
return Schema.compile({
|
|
1012
1069
|
name: "blockTypeSchema",
|
|
@@ -6216,26 +6273,25 @@ const debug = debugWithName("component:Editable"), PLACEHOLDER_STYLE = {
|
|
|
6216
6273
|
});
|
|
6217
6274
|
PortableTextEditable.displayName = "ForwardRef(PortableTextEditable)";
|
|
6218
6275
|
function useEditor(config) {
|
|
6219
|
-
const $ = c(
|
|
6276
|
+
const $ = c(7);
|
|
6220
6277
|
let t0;
|
|
6221
|
-
$[0] !== config.schema ? (t0 = config.schema.hasOwnProperty("jsonType") ? config.schema : compileType(config.schema), $[0] = config.
|
|
6222
|
-
|
|
6223
|
-
|
|
6224
|
-
|
|
6225
|
-
let t3;
|
|
6226
|
-
return $[4] !== config.behaviors || $[5] !== t2 || $[6] !== schema ? (t3 = {
|
|
6278
|
+
$[0] !== config.schemaDefinition || $[1] !== config.schema ? (t0 = config.schemaDefinition ? compileSchemaDefinition(config.schemaDefinition) : getPortableTextMemberSchemaTypes(config.schema.hasOwnProperty("jsonType") ? config.schema : compileType(config.schema)), $[0] = config.schemaDefinition, $[1] = config.schema, $[2] = t0) : t0 = $[2];
|
|
6279
|
+
const schema = t0, t1 = config.keyGenerator ?? defaultKeyGenerator;
|
|
6280
|
+
let t2;
|
|
6281
|
+
return $[3] !== config.behaviors || $[4] !== t1 || $[5] !== schema ? (t2 = {
|
|
6227
6282
|
input: {
|
|
6228
6283
|
behaviors: config.behaviors,
|
|
6229
|
-
keyGenerator:
|
|
6284
|
+
keyGenerator: t1,
|
|
6230
6285
|
schema
|
|
6231
6286
|
}
|
|
6232
|
-
}, $[
|
|
6287
|
+
}, $[3] = config.behaviors, $[4] = t1, $[5] = schema, $[6] = t2) : t2 = $[6], useActorRef(editorMachine, t2);
|
|
6233
6288
|
}
|
|
6234
6289
|
export {
|
|
6235
6290
|
PortableTextEditable,
|
|
6236
6291
|
PortableTextEditor,
|
|
6237
6292
|
createMarkdownBehaviors,
|
|
6238
6293
|
defineBehavior,
|
|
6294
|
+
defineSchema,
|
|
6239
6295
|
editorMachine,
|
|
6240
6296
|
defaultKeyGenerator as keyGenerator,
|
|
6241
6297
|
useEditor,
|