article-content-renderer-vue2 0.1.0

package/dist/types/components/AdManagerAd.d.ts

@@ -0,0 +1,39 @@
+import Vue from 'vue';
+interface GoogleTagSlot {
+    addService: (service: GoogleTagPubAdsService) => GoogleTagSlot;
+}
+interface GoogleTagSlotRenderEndedEvent {
+    slot: GoogleTagSlot;
+    isEmpty: boolean;
+}
+interface GoogleTagPubAdsService {
+    addEventListener: (eventName: 'slotRenderEnded', listener: (event: GoogleTagSlotRenderEndedEvent) => void) => void;
+    removeEventListener?: (eventName: 'slotRenderEnded', listener: (event: GoogleTagSlotRenderEndedEvent) => void) => void;
+}
+export declare const AdManagerAd: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
+    observer: IntersectionObserver | null;
+    definedSlot: GoogleTagSlot | null;
+    pubAdsService: GoogleTagPubAdsService | null;
+    slotRenderEnded: ((event: GoogleTagSlotRenderEndedEvent) => void) | null;
+    emptyAdmKey: string | null;
+    cancelled: boolean;
+}, {
+    restartAdManager(): void;
+    startObserver(): void;
+    requestAd(): void;
+    cleanupAdManager(): void;
+}, {
+    admSlotId: string;
+    adsSlotId: string;
+    adUnitPath: string;
+    fallbackKey: string;
+    hasAdSenseFallback: boolean;
+    shouldUseAdSense: boolean;
+}, {
+    publisherId: string;
+    slotId: string | number;
+    title: string;
+    fallbackPublisherId: string;
+    fallbackSlotId: string | number;
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin>;
+export default AdManagerAd;

package/dist/types/components/AdSenseAd.d.ts

@@ -0,0 +1,18 @@
+import Vue from 'vue';
+export declare const AdSenseAd: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
+    observer: IntersectionObserver | null;
+    requestedKey: string | null;
+}, {
+    requestAd(): void;
+    startObserver(): void;
+    stopObserver(): void;
+}, {
+    adClient: string;
+    adSlot: string;
+    requestKey: string;
+}, {
+    publisherId: string;
+    slotId: string | number;
+    title: string;
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin>;
+export default AdSenseAd;

package/dist/types/components/ArticleContentRenderer.vue.d.ts

@@ -0,0 +1,23 @@
+import Vue from 'vue';
+import type { AdSlot } from '../protocols/types.js';
+import type { AdConfig, PubId, RenderIssue, ResolveArticleButtonLink, ValidationResult } from '../types.js';
+declare const _default: import("vue/types/vue").ExtendedVue<Vue<Record<string, any>, Record<string, any>, never, never, (event: string, ...args: any[]) => Vue>, {
+    reportedRuntimeIssues: Set<string>;
+    reportedAdConfigIssue: string | null;
+}, {
+    reportRuntimeIssue(issue: RenderIssue): void;
+}, {
+    validation: ValidationResult;
+    adConfigIssue: RenderIssue | null;
+    adSlots: readonly AdSlot[];
+}, {
+    document: unknown;
+    protocolVersion: number;
+    strict: boolean;
+    adConf: AdConfig;
+    pubid: PubId;
+    adTitle: string;
+    imageBaseUrl: string;
+    resolveArticleButtonLink: ResolveArticleButtonLink;
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin>;
+export default _default;

package/dist/types/core/url.d.ts

@@ -0,0 +1,6 @@
+type UrlKind = 'link' | 'image';
+export declare const DEFAULT_IMAGE_BASE_URL = "https://www.doitme.link/";
+export declare function replaceImageBaseUrl(value: unknown, imageBaseUrl: string): unknown;
+export declare function sanitizeUrl(value: unknown, kind: UrlKind): string | null;
+export declare function secureRel(rel: unknown, target: '_blank' | '_self'): string | undefined;
+export {};

package/dist/types/index.d.ts

@@ -0,0 +1,8 @@
+import type { PluginObject } from 'vue';
+import ArticleContentRenderer from './components/ArticleContentRenderer.vue';
+export { ArticleContentRenderer };
+export default ArticleContentRenderer;
+export declare const ArticleContentRendererPlugin: PluginObject<never>;
+export { CURRENT_PROTOCOL_VERSION, SUPPORTED_PROTOCOL_VERSIONS, validateArticleDocument, } from './protocols/registry.js';
+export { ARTICLE_CONTENT_PROTOCOL_V1 } from './protocols/v1/metadata.js';
+export type { AdConfig, ArticleButtonAttrs, ArticleButtonClickPayload, ArticleButtonLink, ArticleButtonLinkDescriptor, ArticleButtonNode, ArticleButtonStyle, ArticleContentNode, ArticleDocument, ArticleMark, BlockNode, BlockquoteNode, BoldMark, BulletListNode, CodeBlockNode, CodeBlockTextNode, CodeMark, HeadingNode, HorizontalRuleNode, ImageAlign, ImageNode, ItalicMark, LinkMark, LinkTarget, ListItemNode, OrderedListNode, ParagraphNode, ProtocolVersion, PubId, RenderIssue, RenderIssueCode, ResolveArticleButtonLink, StrikeMark, TableCellNode, TableNode, TableRowNode, TextAlign, TextNode, UnderlineMark, ValidationResult, } from './types.js';

package/dist/types/protocols/registry.d.ts

@@ -0,0 +1,8 @@
+import type { ValidationResult } from '../types.js';
+import type { ProtocolAdapter } from './types.js';
+export declare const SUPPORTED_PROTOCOL_VERSIONS: readonly number[];
+export declare const CURRENT_PROTOCOL_VERSION: 1;
+export declare function getProtocolAdapter(version: number): ProtocolAdapter | undefined;
+export declare function validateArticleDocument(document: unknown, options?: {
+    protocolVersion?: number;
+}): ValidationResult;

package/dist/types/protocols/types.d.ts

@@ -0,0 +1,24 @@
+import type { CreateElement, VNode } from 'vue';
+import type { ArticleButtonClickPayload, RenderIssue, ResolveArticleButtonLink, ValidationResult } from '../types.js';
+export interface RenderContext {
+    createElement: CreateElement;
+    adSlots: readonly AdSlot[];
+    admPublisherId: string;
+    adsPublisherId: string;
+    adTitle: string;
+    imageBaseUrl: string;
+    resolveArticleButtonLink?: ResolveArticleButtonLink;
+    emitArticleButtonClick: (payload: ArticleButtonClickPayload) => void;
+    reportIssue: (issue: RenderIssue) => void;
+}
+export interface AdSlot {
+    index: number;
+    location: number;
+    adm: unknown;
+    ads: unknown;
+}
+export interface ProtocolAdapter {
+    version: number;
+    validate: (document: unknown) => ValidationResult;
+    render: (document: unknown, context: RenderContext) => VNode[];
+}

package/dist/types/protocols/v1/metadata.d.ts

@@ -0,0 +1,12 @@
+export declare const ARTICLE_CONTENT_PROTOCOL_V1: Readonly<{
+    fileFormat: "article-content-protocol";
+    fileFormatVersion: 1;
+    mediaType: "application/vnd.article-content-protocol+json";
+    id: "article-content-v1";
+    version: 1;
+    name: "Article Content Protocol v1";
+    status: "draft";
+    rootNode: "doc";
+    nodeTypes: readonly string[];
+    markTypes: readonly string[];
+}>;

package/dist/types/protocols/v1/renderer.d.ts

@@ -0,0 +1,3 @@
+import type { VNode } from 'vue';
+import type { RenderContext } from '../types.js';
+export declare function renderDocumentV1(document: unknown, context: RenderContext): VNode[];

package/dist/types/protocols/v1/validator.d.ts

@@ -0,0 +1,2 @@
+import type { ValidationResult } from '../../types.js';
+export declare function validateDocumentV1(document: unknown): ValidationResult;

package/dist/types/types.d.ts

@@ -0,0 +1,153 @@
+export type ProtocolVersion = 1;
+export type TextAlign = 'left' | 'center' | 'right' | 'justify';
+export type ImageAlign = 'left' | 'center' | 'right';
+export type ArticleButtonStyle = 'text' | 'button';
+export type LinkTarget = '_blank' | '_self';
+export interface AdConfig {
+    adm?: readonly unknown[];
+    ads?: readonly unknown[];
+    loc: readonly number[];
+}
+export interface PubId {
+    adm: string;
+    ads: string;
+}
+export interface BoldMark {
+    type: 'bold';
+}
+export interface ItalicMark {
+    type: 'italic';
+}
+export interface StrikeMark {
+    type: 'strike';
+}
+export interface UnderlineMark {
+    type: 'underline';
+}
+export interface CodeMark {
+    type: 'code';
+}
+export interface LinkMark {
+    type: 'link';
+    attrs: {
+        href: string;
+        target?: LinkTarget;
+    };
+}
+export type ArticleMark = BoldMark | ItalicMark | StrikeMark | UnderlineMark | CodeMark | LinkMark;
+export interface TextNode {
+    type: 'text';
+    text: string;
+    marks?: ArticleMark[];
+}
+export interface ParagraphNode {
+    type: 'paragraph';
+    attrs?: {
+        textAlign?: TextAlign;
+    };
+    content?: TextNode[];
+}
+export interface HeadingNode {
+    type: 'heading';
+    attrs: {
+        level: 1 | 2 | 3 | 4 | 5 | 6;
+        textAlign?: TextAlign;
+    };
+    content?: TextNode[];
+}
+export interface BlockquoteNode {
+    type: 'blockquote';
+    content: BlockNode[];
+}
+export interface BulletListNode {
+    type: 'bulletList';
+    content: ListItemNode[];
+}
+export interface OrderedListNode {
+    type: 'orderedList';
+    attrs?: {
+        start?: number;
+    };
+    content: ListItemNode[];
+}
+export interface ListItemNode {
+    type: 'listItem';
+    content: BlockNode[];
+}
+export interface CodeBlockTextNode {
+    type: 'text';
+    text: string;
+}
+export interface CodeBlockNode {
+    type: 'codeBlock';
+    attrs?: {
+        language?: string;
+    };
+    content?: CodeBlockTextNode[];
+}
+export interface HorizontalRuleNode {
+    type: 'horizontalRule';
+}
+export interface ImageNode {
+    type: 'image';
+    attrs: {
+        src: string;
+        alt?: string;
+        title?: string;
+        width?: number;
+        height?: number;
+        imageAlign?: ImageAlign;
+    };
+}
+export interface ArticleButtonAttrs {
+    id: string;
+    title?: string;
+    text: string;
+    style: ArticleButtonStyle;
+}
+export interface ArticleButtonNode {
+    type: 'articleButton';
+    attrs: ArticleButtonAttrs;
+}
+export interface TableNode {
+    type: 'table';
+    content: TableRowNode[];
+}
+export interface TableRowNode {
+    type: 'tableRow';
+    content: TableCellNode[];
+}
+export interface TableCellNode {
+    type: 'tableCell';
+    content: BlockNode[];
+}
+export type BlockNode = ParagraphNode | HeadingNode | BlockquoteNode | BulletListNode | OrderedListNode | CodeBlockNode | HorizontalRuleNode | ImageNode | ArticleButtonNode | TableNode;
+export interface ArticleDocument {
+    type: 'doc';
+    content: BlockNode[];
+}
+export type ArticleContentNode = ArticleDocument | BlockNode | ListItemNode | TableRowNode | TableCellNode | TextNode;
+export interface ArticleButtonLinkDescriptor {
+    href: string;
+    target?: LinkTarget;
+    rel?: string;
+}
+export type ArticleButtonLink = string | ArticleButtonLinkDescriptor | null;
+export type ResolveArticleButtonLink = (attrs: Readonly<ArticleButtonAttrs>, node: Readonly<ArticleButtonNode>) => ArticleButtonLink;
+export type RenderIssueCode = 'INVALID_ROOT' | 'INVALID_TYPE' | 'INVALID_CONTENT' | 'INVALID_VALUE' | 'MISSING_PROPERTY' | 'UNKNOWN_PROPERTY' | 'UNKNOWN_NODE' | 'UNKNOWN_MARK' | 'TABLE_COLUMN_MISMATCH' | 'UNSAFE_URL' | 'LINK_RESOLUTION_FAILED' | 'UNSUPPORTED_PROTOCOL' | 'AD_CONFIG_LENGTH_MISMATCH';
+export interface RenderIssue {
+    code: RenderIssueCode;
+    path: string;
+    message: string;
+    nodeType?: string;
+}
+export interface ValidationResult {
+    valid: boolean;
+    issues: RenderIssue[];
+}
+export interface ArticleButtonClickPayload {
+    attrs: Readonly<ArticleButtonAttrs>;
+    node: Readonly<ArticleButtonNode>;
+    href: string | null;
+    event: MouseEvent;
+}

package/package.json

@@ -0,0 +1,77 @@
+{
+  "name": "article-content-renderer-vue2",
+  "version": "0.1.0",
+  "description": "A safe Vue 2.7 renderer for the Article Content Protocol ProseMirror JSON format.",
+  "author": "NovaVoyager",
+  "license": "MIT",
+  "keywords": [
+    "vue2",
+    "editor",
+    "tiptap",
+    "article-editor",
+    "rich-text-editor",
+    "render"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/sword-game-team/article-editor-render-vue2.git"
+  },
+  "homepage": "https://github.com/sword-game-team/article-editor-render-vue2#readme",
+  "bugs": {
+    "url": "https://github.com/sword-game-team/article-editor-render-vue2/issues"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  },
+  "type": "module",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "files": [
+    "dist",
+    "protocol"
+  ],
+  "main": "./dist/index.cjs",
+  "module": "./dist/index.js",
+  "types": "./dist/types/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/types/index.d.ts",
+      "import": "./dist/index.js",
+      "require": "./dist/index.cjs"
+    },
+    "./style.css": "./dist/article-content-renderer-vue2.css"
+  },
+  "scripts": {
+    "dev": "vite --config demo/vite.config.ts",
+    "demo": "vite --config demo/vite.config.ts",
+    "demo:typecheck": "vue-tsc -p demo/tsconfig.json --noEmit",
+    "demo:build": "npm run demo:typecheck && vite build --config demo/vite.config.ts",
+    "build": "vue-tsc --noEmit && vite build && vue-tsc -p tsconfig.build.json",
+    "typecheck": "vue-tsc --noEmit",
+    "test": "vitest",
+    "test:run": "vitest run",
+    "check": "npm run typecheck && npm run test:run && npm run build",
+    "prepublishOnly": "npm run check"
+  },
+  "peerDependencies": {
+    "vue": "^2.7.16"
+  },
+  "devDependencies": {
+    "@types/node": "^22.10.0",
+    "@vitejs/plugin-vue2": "^2.3.3",
+    "@vue/test-utils": "^1.3.6",
+    "jsdom": "^24.1.3",
+    "typescript": "^5.7.2",
+    "vite": "^5.4.11",
+    "vitest": "^2.1.8",
+    "vue": "2.7.16",
+    "vue-server-renderer": "2.7.16",
+    "vue-template-compiler": "2.7.16",
+    "vue-tsc": "^2.2.0"
+  },
+  "engines": {
+    "node": ">=18.0.0"
+  }
+}