@obelism/content-vue 0.1.0 → 0.1.1

package/dist/index.d.mts

@@ -0,0 +1,157 @@
+import * as _obelism_content_bridge from '@obelism/content/bridge';
+import { BridgeOptions, ContentBridge as ContentBridge$1, BridgeState, PromptResult, CreatePageResult, BridgeEvent, BridgeListener } from '@obelism/content/bridge';
+export { BridgeEvent, BridgeEvents, BridgeOptions, BridgeState, PromptBoxOptions, PromptLabels, PromptResult } from '@obelism/content/bridge';
+import * as vue from 'vue';
+import { PropType, ComputedRef, MaybeRefOrGetter, Component, VNodeChild } from 'vue';
+import { Entry, RichTextNode, RichTextMark, EntryStub, Asset } from '@obelism/content';
+export { Asset, Block, Entry, EntryStub, RichTextDocument, RichTextNode, editable } from '@obelism/content';
+
+type ContentBridgeProps = BridgeOptions;
+declare const ContentBridge: vue.DefineComponent<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    prompt: boolean | (Omit<_obelism_content_bridge.PromptBoxOptions, "labels"> & {
+        labels?: Partial<_obelism_content_bridge.PromptLabels & _obelism_content_bridge.SiteEditorLabels> | undefined;
+    }) | undefined;
+    pagePath: ((path: string, locale: string) => string) | undefined;
+    productPath: ((handle: string, locale: string) => string) | undefined;
+    collectionPath: ((handle: string, locale: string) => string) | undefined;
+    url: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type ContentBridgeState = Pick<ContentBridge$1, 'isEditing' | 'mode' | 'entryId' | 'environment'>;
+declare const useContentBridge: ({ url, }?: BridgeOptions) => ComputedRef<ContentBridgeState>;
+declare const useContentBridgeEvent: <E extends BridgeEvent>(event: E, listener: BridgeListener<E>, { url }?: BridgeOptions) => void;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry>, options?: BridgeOptions): ComputedRef<TEntry>;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry | null | undefined>, options?: BridgeOptions): ComputedRef<TEntry | null>;
+type ContentPromptState = BridgeState & {
+    available: boolean;
+    mode: ContentBridge$1['mode'];
+    prompt: (prompt: string, options?: {
+        uid?: string | null;
+    }) => Promise<PromptResult>;
+    createPage: (path: string, prompt: string) => Promise<CreatePageResult>;
+    undo: () => void;
+    select: (uid: string | null) => void;
+    save: () => Promise<void>;
+    publish: () => Promise<void>;
+    signOut: () => void;
+    setSelecting: (selecting: boolean) => void;
+};
+declare const useContentPrompt: ({ url, }?: Pick<BridgeOptions, "url">) => ComputedRef<ContentPromptState>;
+
+type RichTextNodeProps = {
+    node: RichTextNode;
+};
+type RichTextMarkProps = {
+    mark: RichTextMark;
+};
+type RichTextEmbeddedEntryProps = {
+    entry: Entry | EntryStub;
+    node: RichTextNode;
+};
+type RichTextEmbeddedAssetProps = {
+    asset: Asset;
+    node: RichTextNode;
+};
+type RichTextComponents = {
+    nodes?: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks?: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry?: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset?: Component<RichTextEmbeddedAssetProps> | undefined;
+};
+type RichTextProps = RichTextComponents & {
+    document: RichTextNode | null | undefined;
+};
+declare const RichText: vue.DefineComponent<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    nodes: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset: Component<RichTextEmbeddedAssetProps> | undefined;
+    document: RichTextNode | null | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };
+export type { ContentBridgeProps, ContentBridgeState, ContentPromptState, RichTextComponents, RichTextEmbeddedAssetProps, RichTextEmbeddedEntryProps, RichTextMarkProps, RichTextNodeProps, RichTextProps };
+//# sourceMappingURL=index.d.mts.map

package/dist/index.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.mts","sources":["../src/bridge.ts","../src/RichText.ts"],"mappings":"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","names":["Bridge"]}

package/dist/index.d.ts

@@ -0,0 +1,157 @@
+import * as _obelism_content_bridge from '@obelism/content/bridge';
+import { BridgeOptions, ContentBridge as ContentBridge$1, BridgeState, PromptResult, CreatePageResult, BridgeEvent, BridgeListener } from '@obelism/content/bridge';
+export { BridgeEvent, BridgeEvents, BridgeOptions, BridgeState, PromptBoxOptions, PromptLabels, PromptResult } from '@obelism/content/bridge';
+import * as vue from 'vue';
+import { PropType, ComputedRef, MaybeRefOrGetter, Component, VNodeChild } from 'vue';
+import { Entry, RichTextNode, RichTextMark, EntryStub, Asset } from '@obelism/content';
+export { Asset, Block, Entry, EntryStub, RichTextDocument, RichTextNode, editable } from '@obelism/content';
+
+type ContentBridgeProps = BridgeOptions;
+declare const ContentBridge: vue.DefineComponent<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>, () => null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    url: {
+        type: StringConstructor;
+        default: undefined;
+    };
+    prompt: {
+        type: PropType<BridgeOptions["prompt"]>;
+        default: undefined;
+    };
+    pagePath: {
+        type: PropType<BridgeOptions["pagePath"]>;
+        default: undefined;
+    };
+    productPath: {
+        type: PropType<BridgeOptions["productPath"]>;
+        default: undefined;
+    };
+    collectionPath: {
+        type: PropType<BridgeOptions["collectionPath"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    prompt: boolean | (Omit<_obelism_content_bridge.PromptBoxOptions, "labels"> & {
+        labels?: Partial<_obelism_content_bridge.PromptLabels & _obelism_content_bridge.SiteEditorLabels> | undefined;
+    }) | undefined;
+    pagePath: ((path: string, locale: string) => string) | undefined;
+    productPath: ((handle: string, locale: string) => string) | undefined;
+    collectionPath: ((handle: string, locale: string) => string) | undefined;
+    url: string;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+type ContentBridgeState = Pick<ContentBridge$1, 'isEditing' | 'mode' | 'entryId' | 'environment'>;
+declare const useContentBridge: ({ url, }?: BridgeOptions) => ComputedRef<ContentBridgeState>;
+declare const useContentBridgeEvent: <E extends BridgeEvent>(event: E, listener: BridgeListener<E>, { url }?: BridgeOptions) => void;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry>, options?: BridgeOptions): ComputedRef<TEntry>;
+declare function useLiveEntry<TEntry extends Entry>(entry: MaybeRefOrGetter<TEntry | null | undefined>, options?: BridgeOptions): ComputedRef<TEntry | null>;
+type ContentPromptState = BridgeState & {
+    available: boolean;
+    mode: ContentBridge$1['mode'];
+    prompt: (prompt: string, options?: {
+        uid?: string | null;
+    }) => Promise<PromptResult>;
+    createPage: (path: string, prompt: string) => Promise<CreatePageResult>;
+    undo: () => void;
+    select: (uid: string | null) => void;
+    save: () => Promise<void>;
+    publish: () => Promise<void>;
+    signOut: () => void;
+    setSelecting: (selecting: boolean) => void;
+};
+declare const useContentPrompt: ({ url, }?: Pick<BridgeOptions, "url">) => ComputedRef<ContentPromptState>;
+
+type RichTextNodeProps = {
+    node: RichTextNode;
+};
+type RichTextMarkProps = {
+    mark: RichTextMark;
+};
+type RichTextEmbeddedEntryProps = {
+    entry: Entry | EntryStub;
+    node: RichTextNode;
+};
+type RichTextEmbeddedAssetProps = {
+    asset: Asset;
+    node: RichTextNode;
+};
+type RichTextComponents = {
+    nodes?: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks?: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry?: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset?: Component<RichTextEmbeddedAssetProps> | undefined;
+};
+type RichTextProps = RichTextComponents & {
+    document: RichTextNode | null | undefined;
+};
+declare const RichText: vue.DefineComponent<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>, () => VNodeChild, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    document: {
+        type: PropType<RichTextNode | null | undefined>;
+        default: null;
+    };
+    nodes: {
+        type: PropType<RichTextComponents["nodes"]>;
+        default: undefined;
+    };
+    marks: {
+        type: PropType<RichTextComponents["marks"]>;
+        default: undefined;
+    };
+    embeddedEntry: {
+        type: PropType<RichTextComponents["embeddedEntry"]>;
+        default: undefined;
+    };
+    embeddedAsset: {
+        type: PropType<RichTextComponents["embeddedAsset"]>;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    nodes: Partial<Record<string, Component<RichTextNodeProps>>> | undefined;
+    marks: Partial<Record<string, Component<RichTextMarkProps>>> | undefined;
+    embeddedEntry: Component<RichTextEmbeddedEntryProps> | undefined;
+    embeddedAsset: Component<RichTextEmbeddedAssetProps> | undefined;
+    document: RichTextNode | null | undefined;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };
+export type { ContentBridgeProps, ContentBridgeState, ContentPromptState, RichTextComponents, RichTextEmbeddedAssetProps, RichTextEmbeddedEntryProps, RichTextMarkProps, RichTextNodeProps, RichTextProps };
+//# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sources":["../src/bridge.ts","../src/RichText.ts"],"mappings":";;;;;;;;AAKA,KAAK,kBAAkB,GAAG,aAAa;AACvC,cAAc,aAAa,EAAE,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB;AACrE;AACA,cAAc,iBAAiB;AAC/B;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA,4BAA4B,GAAG,CAAC,qBAAqB,EAAE,GAAG,CAAC,qBAAqB,cAAc,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,gBAAgB;AAC5I;AACA,cAAc,iBAAiB;AAC/B;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,aAAa;AACpC;AACA;AACA,MAAM,QAAQ;AACd,uBAAuB,IAAI,CAAC,uBAAuB,CAAC,gBAAgB;AACpE,iBAAiB,OAAO,CAAC,uBAAuB,CAAC,YAAY,GAAG,uBAAuB,CAAC,gBAAgB;AACxG;AACA;AACA;AACA;AACA;AACA,uBAAuB,GAAG,CAAC,uBAAuB;AAClD,KAAK,kBAAkB,GAAG,IAAI,CAACA,eAAM;AACrC,cAAc,gBAAgB,cAAc,aAAa,KAAK,WAAW,CAAC,kBAAkB;AAC5F,cAAc,qBAAqB,aAAa,WAAW,sBAAsB,cAAc,eAAe,aAAa;AAC3H,iBAAiB,YAAY,gBAAgB,KAAK,SAAS,gBAAgB,oBAAoB,aAAa,GAAG,WAAW;AAC1H,iBAAiB,YAAY,gBAAgB,KAAK,SAAS,gBAAgB,uCAAuC,aAAa,GAAG,WAAW;AAC7I,KAAK,kBAAkB,GAAG,WAAW;AACrC;AACA,UAAUA,eAAM;AAChB;AACA;AACA,UAAU,OAAO,CAAC,YAAY;AAC9B,kDAAkD,OAAO,CAAC,gBAAgB;AAC1E;AACA;AACA,gBAAgB,OAAO;AACvB,mBAAmB,OAAO;AAC1B;AACA;AACA;AACA,cAAc,gBAAgB,cAAc,IAAI,CAAC,aAAa,aAAa,WAAW,CAAC,kBAAkB;;ACzEzG,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB;AACA,KAAK,iBAAiB;AACtB,UAAU,YAAY;AACtB;AACA,KAAK,0BAA0B;AAC/B,WAAW,KAAK,GAAG,SAAS;AAC5B,UAAU,YAAY;AACtB;AACA,KAAK,0BAA0B;AAC/B,WAAW,KAAK;AAChB,UAAU,YAAY;AACtB;AACA,KAAK,kBAAkB;AACvB,YAAY,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC9D,YAAY,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC9D,oBAAoB,SAAS,CAAC,0BAA0B;AACxD,oBAAoB,SAAS,CAAC,0BAA0B;AACxD;AACA,KAAK,aAAa,GAAG,kBAAkB;AACvC,cAAc,YAAY;AAC1B;AACA,cAAc,QAAQ,EAAE,GAAG,CAAC,eAAe,CAAC,GAAG,CAAC,gBAAgB;AAChE;AACA,cAAc,QAAQ,CAAC,YAAY;AACnC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA,UAAU,UAAU,cAAc,GAAG,CAAC,qBAAqB,EAAE,GAAG,CAAC,qBAAqB,cAAc,GAAG,CAAC,WAAW,EAAE,QAAQ,CAAC,GAAG,CAAC,gBAAgB;AAClJ;AACA,cAAc,QAAQ,CAAC,YAAY;AACnC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA;AACA,cAAc,QAAQ,CAAC,kBAAkB;AACzC;AACA;AACA,MAAM,QAAQ;AACd,WAAW,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC7D,WAAW,OAAO,CAAC,MAAM,SAAS,SAAS,CAAC,iBAAiB;AAC7D,mBAAmB,SAAS,CAAC,0BAA0B;AACvD,mBAAmB,SAAS,CAAC,0BAA0B;AACvD,cAAc,YAAY;AAC1B,uBAAuB,GAAG,CAAC,uBAAuB;;","names":["Bridge"]}

package/dist/index.js

@@ -0,0 +1,347 @@
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+var bridge = require('@obelism/content/bridge');
+var content = require('@obelism/content');
+
+const noop = ()=>{};
+// Started after mount, never during setup, so it is null on the server and
+// while hydrating, and markup matches. Call the composables in `setup`.
+const useBridge = (options)=>{
+    const bridge$1 = vue.shallowRef(null);
+    vue.onMounted(()=>{
+        bridge$1.value = bridge.getContentBridge(options);
+    });
+    return bridge$1;
+};
+// Starts the visual editor bridge. Put it in the root (`app.vue` or a
+// layout), so clicking a block selects it in the editor on every page, also
+// those without `useLiveEntry`, and editors get the prompt box
+// (`:prompt="false"` leaves it out). Renders nothing, and does nothing
+// outside the editor. Its options apply when it is the first to start the
+// bridge, which in the root it is.
+const ContentBridge = vue.defineComponent({
+    name: 'ContentBridge',
+    props: {
+        url: {
+            type: String,
+            default: undefined
+        },
+        prompt: {
+            type: [
+                Boolean,
+                Object
+            ],
+            default: undefined
+        },
+        pagePath: {
+            type: Function,
+            default: undefined
+        },
+        productPath: {
+            type: Function,
+            default: undefined
+        },
+        collectionPath: {
+            type: Function,
+            default: undefined
+        }
+    },
+    setup (props) {
+        useBridge({
+            url: props.url,
+            prompt: props.prompt,
+            pagePath: props.pagePath,
+            productPath: props.productPath,
+            collectionPath: props.collectionPath
+        });
+        return ()=>null;
+    }
+});
+const NOT_EDITING = {
+    isEditing: false,
+    mode: null,
+    entryId: null,
+    environment: null
+};
+// Whether the page is open in the visual editor (or signed in to edit on the
+// site), and on which entry. Always "not editing" during server rendering
+// and hydration; the real state follows right after.
+const useContentBridge = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    return vue.computed(()=>{
+        const current = bridge.value;
+        if (!current?.isEditing) return NOT_EDITING;
+        const { isEditing, mode, entryId, environment } = current;
+        return {
+            isEditing,
+            mode,
+            entryId,
+            environment
+        };
+    });
+};
+// Calls `listener` on a bridge event, e.g. to refetch server data once the
+// editor saved or published:
+//
+//   const { refresh } = await useAsyncData(…)
+//   useContentBridgeEvent('saved', () => refresh())
+const useContentBridgeEvent = (event, listener, { url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    vue.watch(bridge, (current, _previous, onCleanup)=>{
+        if (current) onCleanup(current.on(event, listener));
+    }, {
+        immediate: true
+    });
+};
+function useLiveEntry(entry, { url } = {}) {
+    const bridge = useBridge({
+        url
+    });
+    const live = vue.shallowRef(null);
+    const id = vue.computed(()=>vue.toValue(entry)?.id);
+    vue.watch([
+        bridge,
+        id
+    ], ([current, currentId], _previous, onCleanup)=>{
+        if (!current || !currentId) return;
+        onCleanup(current.on('update', ({ entry: next })=>{
+            if (next.id === currentId) live.value = next;
+        }));
+    }, {
+        immediate: true
+    });
+    // A live version only stands in for the entry it was sent for.
+    return vue.computed(()=>{
+        const current = vue.toValue(entry);
+        if (live.value && live.value.id === current?.id) return live.value;
+        return current ?? null;
+    });
+}
+const notStarted = ()=>Promise.reject(new Error('Prompts only work inside the visual editor'));
+const notOnSite = ()=>Promise.reject(new Error('Only while signed in to edit on the site'));
+// For your own prompt UI instead of the built-in box (render
+// `<ContentBridge :prompt="false" />`):
+//
+//   const prompt = useContentPrompt()
+//   // <button v-if="prompt.available" @click="prompt.prompt('Make it shorter')">
+const useContentPrompt = ({ url } = {})=>{
+    const bridge$1 = useBridge({
+        url
+    });
+    const state = vue.shallowRef(bridge.INITIAL_STATE);
+    vue.watch(bridge$1, (current, _previous, onCleanup)=>{
+        if (!current) return;
+        state.value = current.getState();
+        onCleanup(current.on('change', ()=>{
+            state.value = current.getState();
+        }));
+    }, {
+        immediate: true
+    });
+    return vue.computed(()=>{
+        const current = bridge$1.value;
+        return {
+            ...state.value,
+            available: state.value.features.includes('prompt'),
+            mode: current?.mode ?? null,
+            prompt: current ? current.prompt : notStarted,
+            createPage: current ? current.createPage : notOnSite,
+            undo: current ? current.undo : noop,
+            select: current ? current.select : noop,
+            save: current ? current.save : notOnSite,
+            publish: current ? current.publish : notOnSite,
+            signOut: current ? current.signOut : noop,
+            setSelecting: current ? current.setSelecting : noop
+        };
+    });
+};
+
+const defaultAsset = (asset)=>{
+    if (asset.mimeType.startsWith('image/')) {
+        return vue.h('figure', [
+            vue.h('img', {
+                src: asset.url,
+                alt: typeof asset.alt === 'string' ? asset.alt : '',
+                width: asset.width ?? undefined,
+                height: asset.height ?? undefined
+            })
+        ]);
+    }
+    return vue.h('p', [
+        vue.h('a', {
+            href: asset.url
+        }, asset.filename)
+    ]);
+};
+const renderMark = (mark, children, marks)=>{
+    const Custom = marks?.[mark.type];
+    if (Custom) return vue.h(Custom, {
+        mark
+    }, {
+        default: ()=>children
+    });
+    switch(mark.type){
+        case 'bold':
+            return vue.h('strong', [
+                children
+            ]);
+        case 'italic':
+            return vue.h('em', [
+                children
+            ]);
+        case 'underline':
+            return vue.h('u', [
+                children
+            ]);
+        case 'strike':
+            return vue.h('s', [
+                children
+            ]);
+        case 'code':
+            return vue.h('code', [
+                children
+            ]);
+        case 'link':
+            {
+                const href = String(mark.attrs?.href ?? '');
+                if (!content.SAFE_HREF.test(href)) return children;
+                const blank = mark.attrs?.target === '_blank';
+                return vue.h('a', {
+                    href,
+                    title: mark.attrs?.title ? String(mark.attrs.title) : undefined,
+                    target: blank ? '_blank' : undefined,
+                    rel: blank ? 'noopener noreferrer' : undefined
+                }, [
+                    children
+                ]);
+            }
+        default:
+            return children;
+    }
+};
+// Renders a rich text document as Vue elements: no HTML strings, links
+// limited to safe schemes, and every node, mark and embed overridable.
+//
+//   <RichText
+//     :document="entry.fields.body"
+//     :embedded-entry="Card"
+//     :nodes="{ heading: Heading }"
+//   />
+const RichText = vue.defineComponent({
+    name: 'RichText',
+    props: {
+        document: {
+            type: Object,
+            default: null
+        },
+        nodes: {
+            type: Object,
+            default: undefined
+        },
+        marks: {
+            type: Object,
+            default: undefined
+        },
+        embeddedEntry: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        },
+        embeddedAsset: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        }
+    },
+    setup (props) {
+        const render = (node)=>{
+            if (node.type === 'text') {
+                return (node.marks ?? []).reduceRight((inner, mark)=>renderMark(mark, inner, props.marks), node.text ?? '');
+            }
+            const children = node.content && node.content.length > 0 ? node.content.map(render).filter((child)=>child != null) : undefined;
+            const Custom = props.nodes?.[node.type];
+            if (Custom) {
+                return vue.h(Custom, {
+                    node
+                }, children ? {
+                    default: ()=>children
+                } : undefined);
+            }
+            switch(node.type){
+                case 'doc':
+                    return children ?? null;
+                case 'paragraph':
+                    return vue.h('p', children);
+                case 'heading':
+                    return vue.h(`h${content.headingLevel(node)}`, children);
+                case 'blockquote':
+                    return vue.h('blockquote', children);
+                case 'bulletList':
+                    return vue.h('ul', children);
+                case 'orderedList':
+                    {
+                        const start = Number(node.attrs?.start ?? 1);
+                        return vue.h('ol', {
+                            start: start !== 1 ? start : undefined
+                        }, children);
+                    }
+                case 'listItem':
+                    return vue.h('li', children);
+                case 'codeBlock':
+                    {
+                        const language = node.attrs?.language;
+                        return vue.h('pre', [
+                            vue.h('code', {
+                                class: language ? `language-${String(language)}` : undefined
+                            }, children)
+                        ]);
+                    }
+                case 'hardBreak':
+                    return vue.h('br');
+                case 'horizontalRule':
+                    return vue.h('hr');
+                case 'embeddedEntry':
+                    {
+                        const entry = node.attrs?.entry;
+                        if (!entry || !props.embeddedEntry) return null;
+                        return vue.h(props.embeddedEntry, {
+                            entry,
+                            node
+                        });
+                    }
+                case 'embeddedAsset':
+                    {
+                        const asset = node.attrs?.asset;
+                        if (!asset) return null;
+                        return props.embeddedAsset ? vue.h(props.embeddedAsset, {
+                            asset,
+                            node
+                        }) : defaultAsset(asset);
+                    }
+                default:
+                    return null;
+            }
+        };
+        return ()=>props.document ? render(props.document) : null;
+    }
+});
+
+Object.defineProperty(exports, "editable", {
+	enumerable: true,
+	get: function () { return content.editable; }
+});
+exports.ContentBridge = ContentBridge;
+exports.RichText = RichText;
+exports.useContentBridge = useContentBridge;
+exports.useContentBridgeEvent = useContentBridgeEvent;
+exports.useContentPrompt = useContentPrompt;
+exports.useLiveEntry = useLiveEntry;

package/dist/index.mjs

@@ -0,0 +1,337 @@
+import { defineComponent, shallowRef, onMounted, computed, watch, toValue, h } from 'vue';
+import { getContentBridge, INITIAL_STATE } from '@obelism/content/bridge';
+import { headingLevel, SAFE_HREF } from '@obelism/content';
+export { editable } from '@obelism/content';
+
+const noop = ()=>{};
+// Started after mount, never during setup, so it is null on the server and
+// while hydrating, and markup matches. Call the composables in `setup`.
+const useBridge = (options)=>{
+    const bridge = shallowRef(null);
+    onMounted(()=>{
+        bridge.value = getContentBridge(options);
+    });
+    return bridge;
+};
+// Starts the visual editor bridge. Put it in the root (`app.vue` or a
+// layout), so clicking a block selects it in the editor on every page, also
+// those without `useLiveEntry`, and editors get the prompt box
+// (`:prompt="false"` leaves it out). Renders nothing, and does nothing
+// outside the editor. Its options apply when it is the first to start the
+// bridge, which in the root it is.
+const ContentBridge = defineComponent({
+    name: 'ContentBridge',
+    props: {
+        url: {
+            type: String,
+            default: undefined
+        },
+        prompt: {
+            type: [
+                Boolean,
+                Object
+            ],
+            default: undefined
+        },
+        pagePath: {
+            type: Function,
+            default: undefined
+        },
+        productPath: {
+            type: Function,
+            default: undefined
+        },
+        collectionPath: {
+            type: Function,
+            default: undefined
+        }
+    },
+    setup (props) {
+        useBridge({
+            url: props.url,
+            prompt: props.prompt,
+            pagePath: props.pagePath,
+            productPath: props.productPath,
+            collectionPath: props.collectionPath
+        });
+        return ()=>null;
+    }
+});
+const NOT_EDITING = {
+    isEditing: false,
+    mode: null,
+    entryId: null,
+    environment: null
+};
+// Whether the page is open in the visual editor (or signed in to edit on the
+// site), and on which entry. Always "not editing" during server rendering
+// and hydration; the real state follows right after.
+const useContentBridge = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    return computed(()=>{
+        const current = bridge.value;
+        if (!current?.isEditing) return NOT_EDITING;
+        const { isEditing, mode, entryId, environment } = current;
+        return {
+            isEditing,
+            mode,
+            entryId,
+            environment
+        };
+    });
+};
+// Calls `listener` on a bridge event, e.g. to refetch server data once the
+// editor saved or published:
+//
+//   const { refresh } = await useAsyncData(…)
+//   useContentBridgeEvent('saved', () => refresh())
+const useContentBridgeEvent = (event, listener, { url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    watch(bridge, (current, _previous, onCleanup)=>{
+        if (current) onCleanup(current.on(event, listener));
+    }, {
+        immediate: true
+    });
+};
+function useLiveEntry(entry, { url } = {}) {
+    const bridge = useBridge({
+        url
+    });
+    const live = shallowRef(null);
+    const id = computed(()=>toValue(entry)?.id);
+    watch([
+        bridge,
+        id
+    ], ([current, currentId], _previous, onCleanup)=>{
+        if (!current || !currentId) return;
+        onCleanup(current.on('update', ({ entry: next })=>{
+            if (next.id === currentId) live.value = next;
+        }));
+    }, {
+        immediate: true
+    });
+    // A live version only stands in for the entry it was sent for.
+    return computed(()=>{
+        const current = toValue(entry);
+        if (live.value && live.value.id === current?.id) return live.value;
+        return current ?? null;
+    });
+}
+const notStarted = ()=>Promise.reject(new Error('Prompts only work inside the visual editor'));
+const notOnSite = ()=>Promise.reject(new Error('Only while signed in to edit on the site'));
+// For your own prompt UI instead of the built-in box (render
+// `<ContentBridge :prompt="false" />`):
+//
+//   const prompt = useContentPrompt()
+//   // <button v-if="prompt.available" @click="prompt.prompt('Make it shorter')">
+const useContentPrompt = ({ url } = {})=>{
+    const bridge = useBridge({
+        url
+    });
+    const state = shallowRef(INITIAL_STATE);
+    watch(bridge, (current, _previous, onCleanup)=>{
+        if (!current) return;
+        state.value = current.getState();
+        onCleanup(current.on('change', ()=>{
+            state.value = current.getState();
+        }));
+    }, {
+        immediate: true
+    });
+    return computed(()=>{
+        const current = bridge.value;
+        return {
+            ...state.value,
+            available: state.value.features.includes('prompt'),
+            mode: current?.mode ?? null,
+            prompt: current ? current.prompt : notStarted,
+            createPage: current ? current.createPage : notOnSite,
+            undo: current ? current.undo : noop,
+            select: current ? current.select : noop,
+            save: current ? current.save : notOnSite,
+            publish: current ? current.publish : notOnSite,
+            signOut: current ? current.signOut : noop,
+            setSelecting: current ? current.setSelecting : noop
+        };
+    });
+};
+
+const defaultAsset = (asset)=>{
+    if (asset.mimeType.startsWith('image/')) {
+        return h('figure', [
+            h('img', {
+                src: asset.url,
+                alt: typeof asset.alt === 'string' ? asset.alt : '',
+                width: asset.width ?? undefined,
+                height: asset.height ?? undefined
+            })
+        ]);
+    }
+    return h('p', [
+        h('a', {
+            href: asset.url
+        }, asset.filename)
+    ]);
+};
+const renderMark = (mark, children, marks)=>{
+    const Custom = marks?.[mark.type];
+    if (Custom) return h(Custom, {
+        mark
+    }, {
+        default: ()=>children
+    });
+    switch(mark.type){
+        case 'bold':
+            return h('strong', [
+                children
+            ]);
+        case 'italic':
+            return h('em', [
+                children
+            ]);
+        case 'underline':
+            return h('u', [
+                children
+            ]);
+        case 'strike':
+            return h('s', [
+                children
+            ]);
+        case 'code':
+            return h('code', [
+                children
+            ]);
+        case 'link':
+            {
+                const href = String(mark.attrs?.href ?? '');
+                if (!SAFE_HREF.test(href)) return children;
+                const blank = mark.attrs?.target === '_blank';
+                return h('a', {
+                    href,
+                    title: mark.attrs?.title ? String(mark.attrs.title) : undefined,
+                    target: blank ? '_blank' : undefined,
+                    rel: blank ? 'noopener noreferrer' : undefined
+                }, [
+                    children
+                ]);
+            }
+        default:
+            return children;
+    }
+};
+// Renders a rich text document as Vue elements: no HTML strings, links
+// limited to safe schemes, and every node, mark and embed overridable.
+//
+//   <RichText
+//     :document="entry.fields.body"
+//     :embedded-entry="Card"
+//     :nodes="{ heading: Heading }"
+//   />
+const RichText = defineComponent({
+    name: 'RichText',
+    props: {
+        document: {
+            type: Object,
+            default: null
+        },
+        nodes: {
+            type: Object,
+            default: undefined
+        },
+        marks: {
+            type: Object,
+            default: undefined
+        },
+        embeddedEntry: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        },
+        embeddedAsset: {
+            type: [
+                Object,
+                Function
+            ],
+            default: undefined
+        }
+    },
+    setup (props) {
+        const render = (node)=>{
+            if (node.type === 'text') {
+                return (node.marks ?? []).reduceRight((inner, mark)=>renderMark(mark, inner, props.marks), node.text ?? '');
+            }
+            const children = node.content && node.content.length > 0 ? node.content.map(render).filter((child)=>child != null) : undefined;
+            const Custom = props.nodes?.[node.type];
+            if (Custom) {
+                return h(Custom, {
+                    node
+                }, children ? {
+                    default: ()=>children
+                } : undefined);
+            }
+            switch(node.type){
+                case 'doc':
+                    return children ?? null;
+                case 'paragraph':
+                    return h('p', children);
+                case 'heading':
+                    return h(`h${headingLevel(node)}`, children);
+                case 'blockquote':
+                    return h('blockquote', children);
+                case 'bulletList':
+                    return h('ul', children);
+                case 'orderedList':
+                    {
+                        const start = Number(node.attrs?.start ?? 1);
+                        return h('ol', {
+                            start: start !== 1 ? start : undefined
+                        }, children);
+                    }
+                case 'listItem':
+                    return h('li', children);
+                case 'codeBlock':
+                    {
+                        const language = node.attrs?.language;
+                        return h('pre', [
+                            h('code', {
+                                class: language ? `language-${String(language)}` : undefined
+                            }, children)
+                        ]);
+                    }
+                case 'hardBreak':
+                    return h('br');
+                case 'horizontalRule':
+                    return h('hr');
+                case 'embeddedEntry':
+                    {
+                        const entry = node.attrs?.entry;
+                        if (!entry || !props.embeddedEntry) return null;
+                        return h(props.embeddedEntry, {
+                            entry,
+                            node
+                        });
+                    }
+                case 'embeddedAsset':
+                    {
+                        const asset = node.attrs?.asset;
+                        if (!asset) return null;
+                        return props.embeddedAsset ? h(props.embeddedAsset, {
+                            asset,
+                            node
+                        }) : defaultAsset(asset);
+                    }
+                default:
+                    return null;
+            }
+        };
+        return ()=>props.document ? render(props.document) : null;
+    }
+});
+
+export { ContentBridge, RichText, useContentBridge, useContentBridgeEvent, useContentPrompt, useLiveEntry };

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@obelism/content-vue",
 	"description": "Obelism Content Vue SDK: live preview in the visual editor and rich text, for Vue and Nuxt",
-	"version": "0.1.0",
+	"version": "0.1.1",
 	"keywords": [
 		"cms",
 		"headless-cms",
@@ -47,7 +47,7 @@
 		"vue": ">=3.3.0"
 	},
 	"dependencies": {
-		"@obelism/content": "^0.29.0"
+		"@obelism/content": "^0.30.0"
 	},
 	"devDependencies": {
 		"@obelism/sdk-typescript-config": "^0.0.0",