Feat: dynamic 'unstable' body blocks

README.md

@@ -33,7 +33,7 @@ when the `content-tree` is in
 from its [ecosystem of utilities][unist-utilities].
 
 `content-tree` relates to [JavaScript][js] in that it has an [ecosystem of
-utilities][unist-utilities] for working with trees in JavaScript.  However,
+utilities][unist-utilities] for working with trees in JavaScript. However,
 `content-tree` is not limited to JavaScript and can be used in other programming
 languages.
 
@@ -106,6 +106,8 @@ type BodyBlock =
 	| Video
 	| YoutubeVideo
 	| Text
+	| Gallery
+	| AudioPlayer
 ```
 
 `BodyBlock` nodes are the only things that are valid as the top level of a `Body`.
@@ -348,7 +350,6 @@ _non normative note:_ the reason this is string properties and not children is
 that it is more confusing if a pullquote falls back to text than if it
 doesn't. The text is taken from elsewhere in the article.
 
-
 ### `ImageSet`
 
 ```ts
@@ -412,10 +413,8 @@ type ImageSource = {
 
 **ImageSource** defines a single resource for an [image](#image).
 
-
 ### `Recommended`
 
-
 ```ts
 interface Recommended extends Node {
 	type: "recommended"
@@ -491,7 +490,6 @@ type Teaser = {
 }
 ```
 
-
 ### `Tweet`
 
 ```ts
@@ -641,7 +639,6 @@ The `layoutName` acts as a sort of theme for the component.
 
 ### `LayoutSlot`
 
-
 ```ts
 interface LayoutSlot extends Parent {
 	type: "layout-slot"
@@ -736,7 +733,7 @@ interface Table extends Parent {
 
 ```ts
 type CustomCodeComponentAttributes = {
-    [key: string]: string | boolean | undefined
+	[key: string]: string | boolean | undefined
 }
 
 interface CustomCodeComponent extends Node {
@@ -757,12 +754,89 @@ interface CustomCodeComponent extends Node {
 }
 ```
 
-- The **CustomCodeComponent*** allows for more experimental forms of journalism, allowing editors to provide properties via Spark.
+- The **CustomCodeComponent\*** allows for more experimental forms of journalism, allowing editors to provide properties via Spark.
 - The component itself lives off-platform, and an example might be a git repository with a standard structure. This structure would include the rendering instructions, and the data structure that is expected to be provided to the component for it to render if necessary.
 - The basic interface in Spark to make reference to this system above (eg. the git repo URL or a public S3 bucket), and provide some data for it if necessary. This will be the Custom Component storyblock.
 - The data Spark receives from entering a specific ID will be used to render dynamic fields (the `attributes`).
 
-
+### Gallery
+
+```ts
+type galleryItem = {
+	/**
+	 * @description link for the image
+	 */
+	imageLink?: "text"
+	/**
+	 * @description this is the first Image
+	 * @default false
+	 */
+	firstImage: boolean
+	/**
+	 * @description image description
+	 */
+
+	imageDescription?: string
+	/**
+	 * @description select or upload image
+	 */
+	picture?: Image
+}
+
+/**
+ * @sparkGenerateStoryblock true
+ */
+interface Gallery extends Node {
+	type: "Gallery"
+
+	/**
+	 * @description gallery description
+	 * @default default text for the source field
+	 */
+	galleryDescription?: string
+	/**
+	 * @description autoplay the gallery
+	 * @default false
+	 */
+	autoPlay?: boolean
+
+	/**
+	 * @description each gallery item
+	 * @maxItems 10
+	 * @minItems 1
+	 */
+	galleryItems: galleryItem[]
+}
+```
+- The **Gallery\*** is the first story block in Spark to be powered entirely by the schema-driven structure of the ContentTree system.Instead of hardcoding its configuration, Spark dynamically inspects the BodyBlock definition in the ContentTree schema and extracts all block types annotated with the @sparkGenerateStoryblock: true flag.These block definitions are automatically converted into ProseMirror node specs and injected into the editor's schema at runtime. The following ContentTree types are currently mapped to Spark components:
+
+- "string" → Rich text
+- "text" → Text input
+- "Image" → Responsive image container
+- "Flourish" → Flourish chart
+- "Video" → Video block
+
+
+```ts
+/**
+ * @sparkGenerateStoryblock true
+ */
+interface AudioPlayer extends Node {
+	type: "AudioPlayer";
+	 /**
+	 * @description Name of the Author
+	 */
+	author: "text";
+	 /**
+	 * @description description of audio file
+	 */
+	description: "text";
+	 /**
+	 * @description Url of the audio file
+	 */
+	audioFile: "text";
+}
+```
 ## License
 
 This software is published by the Financial Times under the [MIT licence](mit).

build.bash

@@ -1,8 +1,8 @@
 #!/bin/bash
 node tools/maketypes <README.md> content-tree.ts
 tsc -d content-tree.ts
-typescript-json-schema --noExtraProps --required content-tree.ts ContentTree.full.Root > schemas/content-tree.schema.json
-typescript-json-schema --noExtraProps --required content-tree.ts ContentTree.transit.Root > schemas/transit-tree.schema.json
-typescript-json-schema --noExtraProps --required content-tree.ts ContentTree.transit.Body > schemas/body-tree.schema.json
+typescript-json-schema --validationKeywords sparkGenerateStoryblock --noExtraProps --required content-tree.ts ContentTree.full.Root > schemas/content-tree.schema.json
+typescript-json-schema --validationKeywords sparkGenerateStoryblock --noExtraProps --required  content-tree.ts ContentTree.transit.Root > schemas/transit-tree.schema.json
+typescript-json-schema --validationKeywords sparkGenerateStoryblock --noExtraProps --required content-tree.ts ContentTree.transit.Body > schemas/body-tree.schema.json
 rm content-tree.ts
 rm content-tree.js