@paragraphcms/parser-vue 0.1.0
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 +9 -0
- package/dist/index.cjs +163 -0
- package/dist/index.d.cts +143 -0
- package/dist/index.d.ts +143 -0
- package/dist/index.d.ts.map +1 -0
- package/dist/index.js +142 -0
- package/package.json +48 -0
package/README.md
ADDED
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
# @paragraphcms/parser-vue
|
|
2
|
+
|
|
3
|
+
Vue renderer for Paragraph CMS content.
|
|
4
|
+
|
|
5
|
+
This package renders Paragraph CMS `markdown`, `html`, and `tiptap` content in Vue. It exports:
|
|
6
|
+
|
|
7
|
+
- `ParagraphContent` Vue component
|
|
8
|
+
- `useParagraphContent` composable
|
|
9
|
+
- HTML rendering helpers and shared types
|
package/dist/index.cjs
ADDED
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __defProp = Object.defineProperty;
|
|
3
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
4
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
5
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
6
|
+
var __export = (target, all) => {
|
|
7
|
+
for (var name in all)
|
|
8
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
9
|
+
};
|
|
10
|
+
var __copyProps = (to, from, except, desc) => {
|
|
11
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
12
|
+
for (let key of __getOwnPropNames(from))
|
|
13
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
14
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
15
|
+
}
|
|
16
|
+
return to;
|
|
17
|
+
};
|
|
18
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
19
|
+
|
|
20
|
+
// src/index.ts
|
|
21
|
+
var index_exports = {};
|
|
22
|
+
__export(index_exports, {
|
|
23
|
+
ParagraphContent: () => ParagraphContent,
|
|
24
|
+
createParagraphDocumentHtml: () => createParagraphDocumentHtml,
|
|
25
|
+
defaultParagraphClassNames: () => defaultParagraphClassNames,
|
|
26
|
+
defaultParagraphMarkedOptions: () => defaultParagraphMarkedOptions,
|
|
27
|
+
defaultParagraphSanitizeOptions: () => defaultParagraphSanitizeOptions,
|
|
28
|
+
inferParagraphContentFormat: () => inferParagraphContentFormat,
|
|
29
|
+
renderParagraphContentHtml: () => renderParagraphContentHtml,
|
|
30
|
+
renderParagraphDocumentHtml: () => renderParagraphDocumentHtml,
|
|
31
|
+
resolveParagraphContentInput: () => resolveParagraphContentInput,
|
|
32
|
+
resolveParagraphRootClassName: () => resolveParagraphRootClassName,
|
|
33
|
+
resolveParagraphSlotClassName: () => resolveParagraphSlotClassName,
|
|
34
|
+
useParagraphContent: () => useParagraphContent
|
|
35
|
+
});
|
|
36
|
+
module.exports = __toCommonJS(index_exports);
|
|
37
|
+
|
|
38
|
+
// src/component.ts
|
|
39
|
+
var import_vue = require("vue");
|
|
40
|
+
|
|
41
|
+
// src/renderer.ts
|
|
42
|
+
var import_parser_core = require("@paragraphcms/parser-core");
|
|
43
|
+
function resolveParagraphContentInput(input) {
|
|
44
|
+
return (0, import_parser_core.resolveParagraphContentInput)(input);
|
|
45
|
+
}
|
|
46
|
+
function inferParagraphContentFormat(content, explicitFormat = null) {
|
|
47
|
+
return (0, import_parser_core.inferParagraphContentFormat)(
|
|
48
|
+
content,
|
|
49
|
+
explicitFormat
|
|
50
|
+
);
|
|
51
|
+
}
|
|
52
|
+
function resolveParagraphSlotClassName(slot, className, options = {}) {
|
|
53
|
+
return (0, import_parser_core.resolveParagraphSlotClassName)(
|
|
54
|
+
slot,
|
|
55
|
+
className,
|
|
56
|
+
options
|
|
57
|
+
);
|
|
58
|
+
}
|
|
59
|
+
function resolveParagraphRootClassName(className, options = {}) {
|
|
60
|
+
return (0, import_parser_core.resolveParagraphRootClassName)(
|
|
61
|
+
className,
|
|
62
|
+
options
|
|
63
|
+
);
|
|
64
|
+
}
|
|
65
|
+
function renderParagraphContentHtml(input) {
|
|
66
|
+
return (0, import_parser_core.renderParagraphContentHtml)(input);
|
|
67
|
+
}
|
|
68
|
+
function renderParagraphDocumentHtml(input) {
|
|
69
|
+
return (0, import_parser_core.renderParagraphDocumentHtml)(input);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
// src/component.ts
|
|
73
|
+
var ParagraphContent = (0, import_vue.defineComponent)({
|
|
74
|
+
name: "ParagraphContent",
|
|
75
|
+
inheritAttrs: false,
|
|
76
|
+
props: {
|
|
77
|
+
as: {
|
|
78
|
+
type: String,
|
|
79
|
+
default: "article"
|
|
80
|
+
},
|
|
81
|
+
page: {
|
|
82
|
+
type: Object,
|
|
83
|
+
default: null
|
|
84
|
+
},
|
|
85
|
+
content: {
|
|
86
|
+
type: [String, Array],
|
|
87
|
+
default: null
|
|
88
|
+
},
|
|
89
|
+
contentFormat: {
|
|
90
|
+
type: String,
|
|
91
|
+
default: null
|
|
92
|
+
},
|
|
93
|
+
classNames: {
|
|
94
|
+
type: Object,
|
|
95
|
+
default: void 0
|
|
96
|
+
},
|
|
97
|
+
markedOptions: {
|
|
98
|
+
type: Object,
|
|
99
|
+
default: void 0
|
|
100
|
+
},
|
|
101
|
+
sanitizeOptions: {
|
|
102
|
+
type: Object,
|
|
103
|
+
default: void 0
|
|
104
|
+
},
|
|
105
|
+
unstyled: {
|
|
106
|
+
type: Boolean,
|
|
107
|
+
default: false
|
|
108
|
+
}
|
|
109
|
+
},
|
|
110
|
+
setup(props, { attrs }) {
|
|
111
|
+
return () => {
|
|
112
|
+
const html = renderParagraphContentHtml(props);
|
|
113
|
+
if (html === null) {
|
|
114
|
+
return null;
|
|
115
|
+
}
|
|
116
|
+
const className = resolveParagraphRootClassName(
|
|
117
|
+
(0, import_vue.normalizeClass)(attrs.class),
|
|
118
|
+
props
|
|
119
|
+
);
|
|
120
|
+
return (0, import_vue.h)(props.as, {
|
|
121
|
+
...attrs,
|
|
122
|
+
class: className,
|
|
123
|
+
innerHTML: html
|
|
124
|
+
});
|
|
125
|
+
};
|
|
126
|
+
}
|
|
127
|
+
});
|
|
128
|
+
function useParagraphContent(input) {
|
|
129
|
+
return (0, import_vue.computed)(() => renderParagraphContentHtml((0, import_vue.toValue)(input)));
|
|
130
|
+
}
|
|
131
|
+
function createParagraphDocumentHtml(input) {
|
|
132
|
+
return (0, import_vue.computed)(() => {
|
|
133
|
+
const value = (0, import_vue.toValue)(input);
|
|
134
|
+
const html = renderParagraphContentHtml(value);
|
|
135
|
+
if (html === null) {
|
|
136
|
+
return null;
|
|
137
|
+
}
|
|
138
|
+
const className = resolveParagraphRootClassName(void 0, value);
|
|
139
|
+
const tagName = typeof value.as === "string" ? value.as : "article";
|
|
140
|
+
return `<${tagName}${className ? ` class="${className}"` : ""}>${html}</${tagName}>`;
|
|
141
|
+
});
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
// src/defaults.ts
|
|
145
|
+
var import_parser_core2 = require("@paragraphcms/parser-core");
|
|
146
|
+
var defaultParagraphClassNames = import_parser_core2.defaultParagraphClassNames;
|
|
147
|
+
var defaultParagraphMarkedOptions = import_parser_core2.defaultParagraphMarkedOptions;
|
|
148
|
+
var defaultParagraphSanitizeOptions = import_parser_core2.defaultParagraphSanitizeOptions;
|
|
149
|
+
// Annotate the CommonJS export names for ESM import in node:
|
|
150
|
+
0 && (module.exports = {
|
|
151
|
+
ParagraphContent,
|
|
152
|
+
createParagraphDocumentHtml,
|
|
153
|
+
defaultParagraphClassNames,
|
|
154
|
+
defaultParagraphMarkedOptions,
|
|
155
|
+
defaultParagraphSanitizeOptions,
|
|
156
|
+
inferParagraphContentFormat,
|
|
157
|
+
renderParagraphContentHtml,
|
|
158
|
+
renderParagraphDocumentHtml,
|
|
159
|
+
resolveParagraphContentInput,
|
|
160
|
+
resolveParagraphRootClassName,
|
|
161
|
+
resolveParagraphSlotClassName,
|
|
162
|
+
useParagraphContent
|
|
163
|
+
});
|
package/dist/index.d.cts
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import * as sanitizeHtml from 'sanitize-html';
|
|
2
|
+
import sanitizeHtml__default from 'sanitize-html';
|
|
3
|
+
import * as marked from 'marked';
|
|
4
|
+
import { MarkedOptions } from 'marked';
|
|
5
|
+
import * as vue from 'vue';
|
|
6
|
+
import { PropType, MaybeRefOrGetter } from 'vue';
|
|
7
|
+
|
|
8
|
+
type ParagraphContentFormat = "markdown" | "html" | "tiptap";
|
|
9
|
+
type ParagraphTiptapMark = {
|
|
10
|
+
type?: string;
|
|
11
|
+
attrs?: Record<string, unknown>;
|
|
12
|
+
};
|
|
13
|
+
type ParagraphTiptapNode = {
|
|
14
|
+
type?: string;
|
|
15
|
+
attrs?: Record<string, unknown>;
|
|
16
|
+
text?: string;
|
|
17
|
+
marks?: ParagraphTiptapMark[];
|
|
18
|
+
content?: ParagraphTiptapNode[];
|
|
19
|
+
};
|
|
20
|
+
type ParagraphPageContent = string | ParagraphTiptapNode[];
|
|
21
|
+
type ParagraphRenderablePage<TFields = Record<string, unknown>> = {
|
|
22
|
+
content_format?: ParagraphContentFormat | null;
|
|
23
|
+
content?: ParagraphPageContent;
|
|
24
|
+
fields?: TFields;
|
|
25
|
+
};
|
|
26
|
+
type ParagraphComponentSlot = "root" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "strong" | "em" | "u" | "s" | "blockquote" | "code" | "pre" | "ul" | "ol" | "li" | "hr" | "br" | "img" | "figure" | "figcaption" | "imageMeta" | "imageSlug" | "imageAlt" | "table" | "thead" | "tbody" | "tr" | "th" | "td" | "faq" | "collapsible" | "summary" | "collapsibleContent" | "taskList" | "taskItem" | "taskCheckbox";
|
|
27
|
+
type ParagraphClassNames = Partial<Record<ParagraphComponentSlot, string>>;
|
|
28
|
+
type ParagraphRenderOptions = {
|
|
29
|
+
classNames?: ParagraphClassNames;
|
|
30
|
+
markedOptions?: MarkedOptions;
|
|
31
|
+
sanitizeOptions?: sanitizeHtml__default.IOptions;
|
|
32
|
+
unstyled?: boolean;
|
|
33
|
+
};
|
|
34
|
+
type ParagraphContentInput<TFields = Record<string, unknown>> = {
|
|
35
|
+
page?: ParagraphRenderablePage<TFields> | null;
|
|
36
|
+
content?: ParagraphPageContent | null;
|
|
37
|
+
contentFormat?: ParagraphContentFormat | null;
|
|
38
|
+
};
|
|
39
|
+
type ParagraphContentProps<TFields = Record<string, unknown>> = ParagraphRenderOptions & {
|
|
40
|
+
as?: string;
|
|
41
|
+
page?: ParagraphRenderablePage<TFields> | null;
|
|
42
|
+
content?: ParagraphPageContent | null;
|
|
43
|
+
contentFormat?: ParagraphContentFormat | null;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
declare const ParagraphContent: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
47
|
+
as: {
|
|
48
|
+
type: StringConstructor;
|
|
49
|
+
default: string;
|
|
50
|
+
};
|
|
51
|
+
page: {
|
|
52
|
+
type: PropType<ParagraphRenderablePage | null>;
|
|
53
|
+
default: null;
|
|
54
|
+
};
|
|
55
|
+
content: {
|
|
56
|
+
type: PropType<ParagraphPageContent | null>;
|
|
57
|
+
default: null;
|
|
58
|
+
};
|
|
59
|
+
contentFormat: {
|
|
60
|
+
type: PropType<ParagraphContentFormat | null>;
|
|
61
|
+
default: null;
|
|
62
|
+
};
|
|
63
|
+
classNames: {
|
|
64
|
+
type: PropType<ParagraphClassNames | undefined>;
|
|
65
|
+
default: undefined;
|
|
66
|
+
};
|
|
67
|
+
markedOptions: {
|
|
68
|
+
type: PropType<ParagraphRenderOptions["markedOptions"]>;
|
|
69
|
+
default: undefined;
|
|
70
|
+
};
|
|
71
|
+
sanitizeOptions: {
|
|
72
|
+
type: PropType<ParagraphRenderOptions["sanitizeOptions"]>;
|
|
73
|
+
default: undefined;
|
|
74
|
+
};
|
|
75
|
+
unstyled: {
|
|
76
|
+
type: BooleanConstructor;
|
|
77
|
+
default: boolean;
|
|
78
|
+
};
|
|
79
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
80
|
+
[key: string]: any;
|
|
81
|
+
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
82
|
+
as: {
|
|
83
|
+
type: StringConstructor;
|
|
84
|
+
default: string;
|
|
85
|
+
};
|
|
86
|
+
page: {
|
|
87
|
+
type: PropType<ParagraphRenderablePage | null>;
|
|
88
|
+
default: null;
|
|
89
|
+
};
|
|
90
|
+
content: {
|
|
91
|
+
type: PropType<ParagraphPageContent | null>;
|
|
92
|
+
default: null;
|
|
93
|
+
};
|
|
94
|
+
contentFormat: {
|
|
95
|
+
type: PropType<ParagraphContentFormat | null>;
|
|
96
|
+
default: null;
|
|
97
|
+
};
|
|
98
|
+
classNames: {
|
|
99
|
+
type: PropType<ParagraphClassNames | undefined>;
|
|
100
|
+
default: undefined;
|
|
101
|
+
};
|
|
102
|
+
markedOptions: {
|
|
103
|
+
type: PropType<ParagraphRenderOptions["markedOptions"]>;
|
|
104
|
+
default: undefined;
|
|
105
|
+
};
|
|
106
|
+
sanitizeOptions: {
|
|
107
|
+
type: PropType<ParagraphRenderOptions["sanitizeOptions"]>;
|
|
108
|
+
default: undefined;
|
|
109
|
+
};
|
|
110
|
+
unstyled: {
|
|
111
|
+
type: BooleanConstructor;
|
|
112
|
+
default: boolean;
|
|
113
|
+
};
|
|
114
|
+
}>> & Readonly<{}>, {
|
|
115
|
+
page: ParagraphRenderablePage | null;
|
|
116
|
+
content: ParagraphPageContent | null;
|
|
117
|
+
contentFormat: ParagraphContentFormat | null;
|
|
118
|
+
classNames: Partial<Record<ParagraphComponentSlot, string>> | undefined;
|
|
119
|
+
markedOptions: marked.MarkedOptions | undefined;
|
|
120
|
+
sanitizeOptions: sanitizeHtml.IOptions | undefined;
|
|
121
|
+
unstyled: boolean;
|
|
122
|
+
as: string;
|
|
123
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
124
|
+
declare function useParagraphContent<TFields = Record<string, unknown>>(input: MaybeRefOrGetter<ParagraphContentInput<TFields> & ParagraphRenderOptions>): vue.ComputedRef<string | null>;
|
|
125
|
+
declare function createParagraphDocumentHtml<TFields = Record<string, unknown>>(input: MaybeRefOrGetter<ParagraphContentProps<TFields>>): vue.ComputedRef<string | null>;
|
|
126
|
+
|
|
127
|
+
declare const defaultParagraphClassNames: ParagraphClassNames;
|
|
128
|
+
declare const defaultParagraphMarkedOptions: NonNullable<ParagraphRenderOptions["markedOptions"]>;
|
|
129
|
+
declare const defaultParagraphSanitizeOptions: NonNullable<ParagraphRenderOptions["sanitizeOptions"]>;
|
|
130
|
+
|
|
131
|
+
declare function resolveParagraphContentInput<TFields = Record<string, unknown>>(input: ParagraphContentInput<TFields>): {
|
|
132
|
+
content: ParagraphPageContent | null;
|
|
133
|
+
contentFormat: ParagraphContentFormat | null;
|
|
134
|
+
};
|
|
135
|
+
declare function inferParagraphContentFormat(content: ParagraphPageContent, explicitFormat?: ParagraphContentFormat | null): ParagraphContentFormat;
|
|
136
|
+
declare function resolveParagraphSlotClassName(slot: ParagraphComponentSlot, className: string | undefined, options?: ParagraphRenderOptions): string | undefined;
|
|
137
|
+
declare function resolveParagraphRootClassName(className: string | undefined, options?: ParagraphRenderOptions): string | undefined;
|
|
138
|
+
declare function renderParagraphContentHtml<TFields = Record<string, unknown>>(input: ParagraphContentInput<TFields> & ParagraphRenderOptions): string | null;
|
|
139
|
+
declare function renderParagraphDocumentHtml<TFields = Record<string, unknown>>(input: ParagraphContentProps<TFields> & {
|
|
140
|
+
className?: string;
|
|
141
|
+
}): string | null;
|
|
142
|
+
|
|
143
|
+
export { type ParagraphClassNames, type ParagraphComponentSlot, ParagraphContent, type ParagraphContentFormat, type ParagraphContentInput, type ParagraphContentProps, type ParagraphPageContent, type ParagraphRenderOptions, type ParagraphRenderablePage, type ParagraphTiptapMark, type ParagraphTiptapNode, createParagraphDocumentHtml, defaultParagraphClassNames, defaultParagraphMarkedOptions, defaultParagraphSanitizeOptions, inferParagraphContentFormat, renderParagraphContentHtml, renderParagraphDocumentHtml, resolveParagraphContentInput, resolveParagraphRootClassName, resolveParagraphSlotClassName, useParagraphContent };
|
package/dist/index.d.ts
ADDED
|
@@ -0,0 +1,143 @@
|
|
|
1
|
+
import * as sanitizeHtml from 'sanitize-html';
|
|
2
|
+
import sanitizeHtml__default from 'sanitize-html';
|
|
3
|
+
import * as marked from 'marked';
|
|
4
|
+
import { MarkedOptions } from 'marked';
|
|
5
|
+
import * as vue from 'vue';
|
|
6
|
+
import { PropType, MaybeRefOrGetter } from 'vue';
|
|
7
|
+
|
|
8
|
+
type ParagraphContentFormat = "markdown" | "html" | "tiptap";
|
|
9
|
+
type ParagraphTiptapMark = {
|
|
10
|
+
type?: string;
|
|
11
|
+
attrs?: Record<string, unknown>;
|
|
12
|
+
};
|
|
13
|
+
type ParagraphTiptapNode = {
|
|
14
|
+
type?: string;
|
|
15
|
+
attrs?: Record<string, unknown>;
|
|
16
|
+
text?: string;
|
|
17
|
+
marks?: ParagraphTiptapMark[];
|
|
18
|
+
content?: ParagraphTiptapNode[];
|
|
19
|
+
};
|
|
20
|
+
type ParagraphPageContent = string | ParagraphTiptapNode[];
|
|
21
|
+
type ParagraphRenderablePage<TFields = Record<string, unknown>> = {
|
|
22
|
+
content_format?: ParagraphContentFormat | null;
|
|
23
|
+
content?: ParagraphPageContent;
|
|
24
|
+
fields?: TFields;
|
|
25
|
+
};
|
|
26
|
+
type ParagraphComponentSlot = "root" | "p" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "a" | "strong" | "em" | "u" | "s" | "blockquote" | "code" | "pre" | "ul" | "ol" | "li" | "hr" | "br" | "img" | "figure" | "figcaption" | "imageMeta" | "imageSlug" | "imageAlt" | "table" | "thead" | "tbody" | "tr" | "th" | "td" | "faq" | "collapsible" | "summary" | "collapsibleContent" | "taskList" | "taskItem" | "taskCheckbox";
|
|
27
|
+
type ParagraphClassNames = Partial<Record<ParagraphComponentSlot, string>>;
|
|
28
|
+
type ParagraphRenderOptions = {
|
|
29
|
+
classNames?: ParagraphClassNames;
|
|
30
|
+
markedOptions?: MarkedOptions;
|
|
31
|
+
sanitizeOptions?: sanitizeHtml__default.IOptions;
|
|
32
|
+
unstyled?: boolean;
|
|
33
|
+
};
|
|
34
|
+
type ParagraphContentInput<TFields = Record<string, unknown>> = {
|
|
35
|
+
page?: ParagraphRenderablePage<TFields> | null;
|
|
36
|
+
content?: ParagraphPageContent | null;
|
|
37
|
+
contentFormat?: ParagraphContentFormat | null;
|
|
38
|
+
};
|
|
39
|
+
type ParagraphContentProps<TFields = Record<string, unknown>> = ParagraphRenderOptions & {
|
|
40
|
+
as?: string;
|
|
41
|
+
page?: ParagraphRenderablePage<TFields> | null;
|
|
42
|
+
content?: ParagraphPageContent | null;
|
|
43
|
+
contentFormat?: ParagraphContentFormat | null;
|
|
44
|
+
};
|
|
45
|
+
|
|
46
|
+
declare const ParagraphContent: vue.DefineComponent<vue.ExtractPropTypes<{
|
|
47
|
+
as: {
|
|
48
|
+
type: StringConstructor;
|
|
49
|
+
default: string;
|
|
50
|
+
};
|
|
51
|
+
page: {
|
|
52
|
+
type: PropType<ParagraphRenderablePage | null>;
|
|
53
|
+
default: null;
|
|
54
|
+
};
|
|
55
|
+
content: {
|
|
56
|
+
type: PropType<ParagraphPageContent | null>;
|
|
57
|
+
default: null;
|
|
58
|
+
};
|
|
59
|
+
contentFormat: {
|
|
60
|
+
type: PropType<ParagraphContentFormat | null>;
|
|
61
|
+
default: null;
|
|
62
|
+
};
|
|
63
|
+
classNames: {
|
|
64
|
+
type: PropType<ParagraphClassNames | undefined>;
|
|
65
|
+
default: undefined;
|
|
66
|
+
};
|
|
67
|
+
markedOptions: {
|
|
68
|
+
type: PropType<ParagraphRenderOptions["markedOptions"]>;
|
|
69
|
+
default: undefined;
|
|
70
|
+
};
|
|
71
|
+
sanitizeOptions: {
|
|
72
|
+
type: PropType<ParagraphRenderOptions["sanitizeOptions"]>;
|
|
73
|
+
default: undefined;
|
|
74
|
+
};
|
|
75
|
+
unstyled: {
|
|
76
|
+
type: BooleanConstructor;
|
|
77
|
+
default: boolean;
|
|
78
|
+
};
|
|
79
|
+
}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
|
|
80
|
+
[key: string]: any;
|
|
81
|
+
}> | null, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
|
|
82
|
+
as: {
|
|
83
|
+
type: StringConstructor;
|
|
84
|
+
default: string;
|
|
85
|
+
};
|
|
86
|
+
page: {
|
|
87
|
+
type: PropType<ParagraphRenderablePage | null>;
|
|
88
|
+
default: null;
|
|
89
|
+
};
|
|
90
|
+
content: {
|
|
91
|
+
type: PropType<ParagraphPageContent | null>;
|
|
92
|
+
default: null;
|
|
93
|
+
};
|
|
94
|
+
contentFormat: {
|
|
95
|
+
type: PropType<ParagraphContentFormat | null>;
|
|
96
|
+
default: null;
|
|
97
|
+
};
|
|
98
|
+
classNames: {
|
|
99
|
+
type: PropType<ParagraphClassNames | undefined>;
|
|
100
|
+
default: undefined;
|
|
101
|
+
};
|
|
102
|
+
markedOptions: {
|
|
103
|
+
type: PropType<ParagraphRenderOptions["markedOptions"]>;
|
|
104
|
+
default: undefined;
|
|
105
|
+
};
|
|
106
|
+
sanitizeOptions: {
|
|
107
|
+
type: PropType<ParagraphRenderOptions["sanitizeOptions"]>;
|
|
108
|
+
default: undefined;
|
|
109
|
+
};
|
|
110
|
+
unstyled: {
|
|
111
|
+
type: BooleanConstructor;
|
|
112
|
+
default: boolean;
|
|
113
|
+
};
|
|
114
|
+
}>> & Readonly<{}>, {
|
|
115
|
+
page: ParagraphRenderablePage | null;
|
|
116
|
+
content: ParagraphPageContent | null;
|
|
117
|
+
contentFormat: ParagraphContentFormat | null;
|
|
118
|
+
classNames: Partial<Record<ParagraphComponentSlot, string>> | undefined;
|
|
119
|
+
markedOptions: marked.MarkedOptions | undefined;
|
|
120
|
+
sanitizeOptions: sanitizeHtml.IOptions | undefined;
|
|
121
|
+
unstyled: boolean;
|
|
122
|
+
as: string;
|
|
123
|
+
}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
|
|
124
|
+
declare function useParagraphContent<TFields = Record<string, unknown>>(input: MaybeRefOrGetter<ParagraphContentInput<TFields> & ParagraphRenderOptions>): vue.ComputedRef<string | null>;
|
|
125
|
+
declare function createParagraphDocumentHtml<TFields = Record<string, unknown>>(input: MaybeRefOrGetter<ParagraphContentProps<TFields>>): vue.ComputedRef<string | null>;
|
|
126
|
+
|
|
127
|
+
declare const defaultParagraphClassNames: ParagraphClassNames;
|
|
128
|
+
declare const defaultParagraphMarkedOptions: NonNullable<ParagraphRenderOptions["markedOptions"]>;
|
|
129
|
+
declare const defaultParagraphSanitizeOptions: NonNullable<ParagraphRenderOptions["sanitizeOptions"]>;
|
|
130
|
+
|
|
131
|
+
declare function resolveParagraphContentInput<TFields = Record<string, unknown>>(input: ParagraphContentInput<TFields>): {
|
|
132
|
+
content: ParagraphPageContent | null;
|
|
133
|
+
contentFormat: ParagraphContentFormat | null;
|
|
134
|
+
};
|
|
135
|
+
declare function inferParagraphContentFormat(content: ParagraphPageContent, explicitFormat?: ParagraphContentFormat | null): ParagraphContentFormat;
|
|
136
|
+
declare function resolveParagraphSlotClassName(slot: ParagraphComponentSlot, className: string | undefined, options?: ParagraphRenderOptions): string | undefined;
|
|
137
|
+
declare function resolveParagraphRootClassName(className: string | undefined, options?: ParagraphRenderOptions): string | undefined;
|
|
138
|
+
declare function renderParagraphContentHtml<TFields = Record<string, unknown>>(input: ParagraphContentInput<TFields> & ParagraphRenderOptions): string | null;
|
|
139
|
+
declare function renderParagraphDocumentHtml<TFields = Record<string, unknown>>(input: ParagraphContentProps<TFields> & {
|
|
140
|
+
className?: string;
|
|
141
|
+
}): string | null;
|
|
142
|
+
|
|
143
|
+
export { type ParagraphClassNames, type ParagraphComponentSlot, ParagraphContent, type ParagraphContentFormat, type ParagraphContentInput, type ParagraphContentProps, type ParagraphPageContent, type ParagraphRenderOptions, type ParagraphRenderablePage, type ParagraphTiptapMark, type ParagraphTiptapNode, createParagraphDocumentHtml, defaultParagraphClassNames, defaultParagraphMarkedOptions, defaultParagraphSanitizeOptions, inferParagraphContentFormat, renderParagraphContentHtml, renderParagraphDocumentHtml, resolveParagraphContentInput, resolveParagraphRootClassName, resolveParagraphSlotClassName, useParagraphContent };
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,MAAM,MAAM,sBAAsB,GAAG,UAAU,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEpE,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAChC,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC9B,OAAO,CAAC,EAAE,mBAAmB,EAAE,CAAC;CACjC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,MAAM,GAAG,mBAAmB,EAAE,CAAC;AAElE,MAAM,MAAM,uBAAuB,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACvE,cAAc,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,oBAAoB,CAAC;IAC/B,MAAM,CAAC,EAAE,OAAO,CAAC;CAClB,CAAC;AAEF,MAAM,MAAM,wBAAwB,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,IAAI;IACxE,IAAI,CAAC,EAAE,uBAAuB,CAAC,OAAO,CAAC,GAAG,IAAI,CAAC;IAC/C,OAAO,CAAC,EAAE,oBAAoB,GAAG,IAAI,CAAC;IACtC,aAAa,CAAC,EAAE,sBAAsB,GAAG,IAAI,CAAC;CAC/C,CAAC;AAEF,wBAAgB,0BAA0B,CAAC,OAAO,GAAG,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAC1E,KAAK,EAAE,wBAAwB,CAAC,OAAO,CAAC;;;EAWzC;AAED,wBAAgB,8BAA8B,CAC5C,OAAO,EAAE,oBAAoB,EAC7B,cAAc,GAAE,sBAAsB,GAAG,IAAW,GACnD,sBAAsB,CAYxB"}
|
package/dist/index.js
ADDED
|
@@ -0,0 +1,142 @@
|
|
|
1
|
+
// src/component.ts
|
|
2
|
+
import {
|
|
3
|
+
computed,
|
|
4
|
+
defineComponent,
|
|
5
|
+
h,
|
|
6
|
+
normalizeClass,
|
|
7
|
+
toValue
|
|
8
|
+
} from "vue";
|
|
9
|
+
|
|
10
|
+
// src/renderer.ts
|
|
11
|
+
import {
|
|
12
|
+
inferParagraphContentFormat as coreInferParagraphContentFormat,
|
|
13
|
+
renderParagraphContentHtml as coreRenderParagraphContentHtml,
|
|
14
|
+
renderParagraphDocumentHtml as coreRenderParagraphDocumentHtml,
|
|
15
|
+
resolveParagraphContentInput as coreResolveParagraphContentInput,
|
|
16
|
+
resolveParagraphRootClassName as coreResolveParagraphRootClassName,
|
|
17
|
+
resolveParagraphSlotClassName as coreResolveParagraphSlotClassName
|
|
18
|
+
} from "@paragraphcms/parser-core";
|
|
19
|
+
function resolveParagraphContentInput(input) {
|
|
20
|
+
return coreResolveParagraphContentInput(input);
|
|
21
|
+
}
|
|
22
|
+
function inferParagraphContentFormat(content, explicitFormat = null) {
|
|
23
|
+
return coreInferParagraphContentFormat(
|
|
24
|
+
content,
|
|
25
|
+
explicitFormat
|
|
26
|
+
);
|
|
27
|
+
}
|
|
28
|
+
function resolveParagraphSlotClassName(slot, className, options = {}) {
|
|
29
|
+
return coreResolveParagraphSlotClassName(
|
|
30
|
+
slot,
|
|
31
|
+
className,
|
|
32
|
+
options
|
|
33
|
+
);
|
|
34
|
+
}
|
|
35
|
+
function resolveParagraphRootClassName(className, options = {}) {
|
|
36
|
+
return coreResolveParagraphRootClassName(
|
|
37
|
+
className,
|
|
38
|
+
options
|
|
39
|
+
);
|
|
40
|
+
}
|
|
41
|
+
function renderParagraphContentHtml(input) {
|
|
42
|
+
return coreRenderParagraphContentHtml(input);
|
|
43
|
+
}
|
|
44
|
+
function renderParagraphDocumentHtml(input) {
|
|
45
|
+
return coreRenderParagraphDocumentHtml(input);
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
// src/component.ts
|
|
49
|
+
var ParagraphContent = defineComponent({
|
|
50
|
+
name: "ParagraphContent",
|
|
51
|
+
inheritAttrs: false,
|
|
52
|
+
props: {
|
|
53
|
+
as: {
|
|
54
|
+
type: String,
|
|
55
|
+
default: "article"
|
|
56
|
+
},
|
|
57
|
+
page: {
|
|
58
|
+
type: Object,
|
|
59
|
+
default: null
|
|
60
|
+
},
|
|
61
|
+
content: {
|
|
62
|
+
type: [String, Array],
|
|
63
|
+
default: null
|
|
64
|
+
},
|
|
65
|
+
contentFormat: {
|
|
66
|
+
type: String,
|
|
67
|
+
default: null
|
|
68
|
+
},
|
|
69
|
+
classNames: {
|
|
70
|
+
type: Object,
|
|
71
|
+
default: void 0
|
|
72
|
+
},
|
|
73
|
+
markedOptions: {
|
|
74
|
+
type: Object,
|
|
75
|
+
default: void 0
|
|
76
|
+
},
|
|
77
|
+
sanitizeOptions: {
|
|
78
|
+
type: Object,
|
|
79
|
+
default: void 0
|
|
80
|
+
},
|
|
81
|
+
unstyled: {
|
|
82
|
+
type: Boolean,
|
|
83
|
+
default: false
|
|
84
|
+
}
|
|
85
|
+
},
|
|
86
|
+
setup(props, { attrs }) {
|
|
87
|
+
return () => {
|
|
88
|
+
const html = renderParagraphContentHtml(props);
|
|
89
|
+
if (html === null) {
|
|
90
|
+
return null;
|
|
91
|
+
}
|
|
92
|
+
const className = resolveParagraphRootClassName(
|
|
93
|
+
normalizeClass(attrs.class),
|
|
94
|
+
props
|
|
95
|
+
);
|
|
96
|
+
return h(props.as, {
|
|
97
|
+
...attrs,
|
|
98
|
+
class: className,
|
|
99
|
+
innerHTML: html
|
|
100
|
+
});
|
|
101
|
+
};
|
|
102
|
+
}
|
|
103
|
+
});
|
|
104
|
+
function useParagraphContent(input) {
|
|
105
|
+
return computed(() => renderParagraphContentHtml(toValue(input)));
|
|
106
|
+
}
|
|
107
|
+
function createParagraphDocumentHtml(input) {
|
|
108
|
+
return computed(() => {
|
|
109
|
+
const value = toValue(input);
|
|
110
|
+
const html = renderParagraphContentHtml(value);
|
|
111
|
+
if (html === null) {
|
|
112
|
+
return null;
|
|
113
|
+
}
|
|
114
|
+
const className = resolveParagraphRootClassName(void 0, value);
|
|
115
|
+
const tagName = typeof value.as === "string" ? value.as : "article";
|
|
116
|
+
return `<${tagName}${className ? ` class="${className}"` : ""}>${html}</${tagName}>`;
|
|
117
|
+
});
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// src/defaults.ts
|
|
121
|
+
import {
|
|
122
|
+
defaultParagraphClassNames as coreDefaultParagraphClassNames,
|
|
123
|
+
defaultParagraphMarkedOptions as coreDefaultParagraphMarkedOptions,
|
|
124
|
+
defaultParagraphSanitizeOptions as coreDefaultParagraphSanitizeOptions
|
|
125
|
+
} from "@paragraphcms/parser-core";
|
|
126
|
+
var defaultParagraphClassNames = coreDefaultParagraphClassNames;
|
|
127
|
+
var defaultParagraphMarkedOptions = coreDefaultParagraphMarkedOptions;
|
|
128
|
+
var defaultParagraphSanitizeOptions = coreDefaultParagraphSanitizeOptions;
|
|
129
|
+
export {
|
|
130
|
+
ParagraphContent,
|
|
131
|
+
createParagraphDocumentHtml,
|
|
132
|
+
defaultParagraphClassNames,
|
|
133
|
+
defaultParagraphMarkedOptions,
|
|
134
|
+
defaultParagraphSanitizeOptions,
|
|
135
|
+
inferParagraphContentFormat,
|
|
136
|
+
renderParagraphContentHtml,
|
|
137
|
+
renderParagraphDocumentHtml,
|
|
138
|
+
resolveParagraphContentInput,
|
|
139
|
+
resolveParagraphRootClassName,
|
|
140
|
+
resolveParagraphSlotClassName,
|
|
141
|
+
useParagraphContent
|
|
142
|
+
};
|
package/package.json
ADDED
|
@@ -0,0 +1,48 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@paragraphcms/parser-vue",
|
|
3
|
+
"version": "0.1.0",
|
|
4
|
+
"description": "Vue renderer for Paragraph CMS content.",
|
|
5
|
+
"license": "MIT",
|
|
6
|
+
"author": "Paragraph CMS",
|
|
7
|
+
"type": "module",
|
|
8
|
+
"main": "./dist/index.cjs",
|
|
9
|
+
"module": "./dist/index.js",
|
|
10
|
+
"types": "./dist/index.d.ts",
|
|
11
|
+
"exports": {
|
|
12
|
+
".": {
|
|
13
|
+
"types": "./dist/index.d.ts",
|
|
14
|
+
"import": "./dist/index.js",
|
|
15
|
+
"require": "./dist/index.cjs"
|
|
16
|
+
}
|
|
17
|
+
},
|
|
18
|
+
"files": [
|
|
19
|
+
"dist",
|
|
20
|
+
"README.md"
|
|
21
|
+
],
|
|
22
|
+
"publishConfig": {
|
|
23
|
+
"access": "public"
|
|
24
|
+
},
|
|
25
|
+
"sideEffects": false,
|
|
26
|
+
"engines": {
|
|
27
|
+
"node": ">=18"
|
|
28
|
+
},
|
|
29
|
+
"scripts": {
|
|
30
|
+
"build": "tsup src/index.ts --format esm,cjs --dts",
|
|
31
|
+
"check": "tsc -p tsconfig.json --noEmit",
|
|
32
|
+
"prepublishOnly": "npm run check && npm run build"
|
|
33
|
+
},
|
|
34
|
+
"peerDependencies": {
|
|
35
|
+
"vue": "^3.4.0"
|
|
36
|
+
},
|
|
37
|
+
"dependencies": {
|
|
38
|
+
"@paragraphcms/parser-core": "^0.1.0"
|
|
39
|
+
},
|
|
40
|
+
"devDependencies": {
|
|
41
|
+
"@types/sanitize-html": "^2.13.0",
|
|
42
|
+
"marked": "^15.0.12",
|
|
43
|
+
"sanitize-html": "^2.15.0",
|
|
44
|
+
"tsup": "^8.5.1",
|
|
45
|
+
"typescript": "^5.9.3",
|
|
46
|
+
"vue": "^3.5.13"
|
|
47
|
+
}
|
|
48
|
+
}
|