feat: json rich text editor, blocks, asides, general structure

types/rte/attrs.ts

@@ -0,0 +1,38 @@
+import { RTEItemTypeEnum } from "./enums"
+import type { EmbedTypesEnum, RTEItemType } from "./enums"
+import type { Lang } from "../lang"
+
+export interface Attributes {
+  [key: string]: any
+  "class-name"?: string
+  type: RTEItemType
+}
+
+export interface RTEAssetAttrs extends Attributes {
+  "alt": string
+  "asset-alt": string
+  "asset-link": string
+  "asset-name": string
+  "asset-type": "image/png" | "image/jpg" | "image/jpeg"
+  "asset-uid": string
+  "display-type": EmbedTypesEnum.display
+  "content-type-uid": "sys_assets"
+  "inline": false
+  "type": RTEItemTypeEnum.asset
+}
+
+export interface RTEAnchorAttrs extends Attributes {
+  target: string
+  url: string
+}
+
+export interface RTELinkAttrs extends Attributes {
+  'display-type': EmbedTypesEnum.link
+  'class-name': string
+  'content-type-uid': string
+  'entry-uid': string
+  locale: Lang
+  href: string
+  target: HTMLAnchorElement["target"]
+  type: RTEItemTypeEnum.entry
+}

types/rte/enums.ts

@@ -0,0 +1,48 @@
+export enum EmbedTypesEnum {
+  block = 'block',
+  display = 'display',
+  download = 'download',
+  inline = 'inline',
+  link = 'link',
+}
+
+export type EmbedTypes = keyof typeof EmbedTypesEnum
+
+/** Copied from https://github.com/contentstack/contentstack-utils-javascript/blob/master/src/nodes/node-type.ts */
+export enum RTETypeEnum {
+  a = "a",
+  blockquote = "blockquote",
+  code = "code",
+  doc = "doc",
+  embed = "embed",
+  h1 = "h1",
+  h2 = "h2",
+  h3 = "h3",
+  h4 = "h4",
+  h5 = "h5",
+  h6 = "h6",
+  hr = "hr",
+  img = "img",
+  li = "li",
+  ol = "ol",
+  p = "p",
+  reference = "reference",
+  table = "table",
+  tbody = "tbody",
+  td = "td",
+  text = "text",
+  tfoot = "tfoot",
+  th = "th",
+  thead = "thead",
+  tr = "tr",
+  ul = "ul",
+}
+
+export type RTEType = keyof typeof RTETypeEnum
+
+export enum RTEItemTypeEnum {
+  asset = "asset",
+  entry = "entry",
+}
+
+export type RTEItemType = keyof typeof RTEItemTypeEnum

types/rte/node.ts

@@ -0,0 +1,71 @@
+import { RTETypeEnum } from "./enums"
+import type { Attributes, RTEAnchorAttrs, RTEAssetAttrs, RTELinkAttrs } from "./attrs"
+import type { EmbedByUid } from "../components/jsontohtml"
+import type { RenderOptions } from "./option"
+
+export interface RTEDefaultNode {
+  attrs: Attributes
+  children: RTENode[]
+  type: RTETypeEnum
+  uid: string
+}
+
+export interface RTELinkNode {
+  attrs: Attributes
+  children: RTENode[]
+  type: RTETypeEnum
+  uid: string
+}
+
+export interface RTEReferenceAssetNode extends RTEDefaultNode {
+  attrs: RTEAssetAttrs
+}
+
+export interface RTEAnchorNode extends RTEDefaultNode {
+  attrs: RTEAnchorAttrs
+  type: RTETypeEnum.a
+}
+
+export interface RTEReferenceLinkNode extends RTEDefaultNode {
+  attrs: RTELinkAttrs
+}
+
+export enum RTEMarkType {
+  bold = "bold",
+  break = "break",
+  classnameOrId = "classnameOrId",
+  inlineCode = "inlineCode",
+  italic = "italic",
+  strikethrough = "strikethrough",
+  subscript = "subscript",
+  superscript = "superscript",
+  underline = "underline",
+}
+
+type RTETextNodeOptionalKeys = {
+  [key in RTEMarkType]?: boolean
+}
+
+export type RTETextNode = RTETextNodeOptionalKeys & {
+  classname?: string
+  id?: string
+  text: string
+}
+
+export type RTERegularNode = RTEDefaultNode | RTEAnchorNode
+
+export type RTEReferenceNode = RTEDefaultNode | RTEAnchorNode
+
+export type RTENode = RTERegularNode | RTEReferenceNode | RTETextNode
+
+export type RTERenderMark = (children: React.ReactNode, classname?: string, id?: string) => JSX.Element
+
+export interface RTEDocument extends RTEDefaultNode {
+  type: RTETypeEnum.doc
+  _version: number
+}
+
+export type RTERenderOptionComponent = (node: RTERegularNode, embeds: EmbedByUid, next: RTENext, fullRenderOptions: RenderOptions) => React.ReactNode
+
+export type RTENext = (nodes: RTENode[], embeds: EmbedByUid, fullRenderOptions: RenderOptions) => string
+

types/rte/option.ts

@@ -0,0 +1,5 @@
+import type { RTERenderMark, RTERenderOptionComponent } from "./node"
+
+export type RenderOptions = {
+  [type: string]: RTERenderOptionComponent | RTERenderMark
+}