Skip to content

Commit

Permalink
feat: add new format for card/icon/aspect configuration (techiedarren#28
Browse files Browse the repository at this point in the history 
)
  • Loading branch information
@rs-amp
rs-amp authored May 10, 2021
1 parent a4fe515 commit 7cff061
Show file tree
Hide file tree
Showing 8 changed files with 250 additions and 35 deletions.
42 changes: 30 additions & 12 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -286,11 +286,12 @@ By default, an icon will be displayed for embedded content items. You can provid
"tools": {
"dc-content-link": {
"contentTypes": ["<schema-id>"],
"contentTypeSettings": {
"icons": {
"<schema-id>": "<icon-url>"
"contentTypeSettings": [
{
"id": "<schema-id>",
"icon": "<icon-url>"
}
}
]
}
}
}
Expand All @@ -302,11 +303,12 @@ If you wish to display a card / visualization, provide a templated URL in the pa

```json
{
"contentTypeSettings": {
"cards": {
"<schema-id>": "http://myapp.com/visualization?vse={{vse.domain}}&content={{content.sys.id}}"
"contentTypeSettings": [
{
"id": "<schema-id>",
"card": "http://myapp.com/visualization?vse={{vse.domain}}&content={{content.sys.id}}"
}
}
]
}
```

Expand All @@ -316,11 +318,27 @@ Finally, you can also provide a custom aspect ratio for each content type.

```json
{
"contentTypeSettings": {
"aspectRatios": {
"<schema-id>": "3:1"
"contentTypeSettings": [
{
"id": "<schema-id>",
"aspectRatio": "3:1"
}
}
]
}
```

When using multiple of these properties, use them on the same object:

```json
{
"contentTypeSettings": [
{
"id": "<schema-id>",
"icon": "<icon-url>",
"card": "http://myapp.com/visualization?vse={{vse.domain}}&content={{content.sys.id}}",
"aspectRatio": "3:1"
}
]
}
```

Expand Down
13 changes: 6 additions & 7 deletions packages/extension/src/EditorRichTextField/EditorRichTextField.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,12 @@ storiesOf("EditorRichTextField", module)
contentTypes: [
"https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json"
],
contentTypeSettings: {
cards: {
"https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json":
"https://d3rcavkmxce5gq.cloudfront.net/preview/card?vse={{vse.domain}}&content={{content.sys.id}}"
},
icons: {}
}
contentTypeSettings: [
{
id: "https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json",
card: "https://d3rcavkmxce5gq.cloudfront.net/preview/card?vse={{vse.domain}}&content={{content.sys.id}}"
}
]
}
}
}
Expand Down
16 changes: 9 additions & 7 deletions packages/extension/src/EditorRichTextField/EditorRichTextField.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ import { RichTextEditor } from "../RichTextEditor";

import JSONLanguage from "@dc-extension-rich-text/language-json";
import MarkdownLanguage from "@dc-extension-rich-text/language-markdown";
import { ContentTypeSettings, SdkContext } from "unofficial-dynamic-content-ui";
import { SdkContext } from "unofficial-dynamic-content-ui";

import {
RichLanguage,
Expand All @@ -16,7 +16,9 @@ import {
import {
DcContentLinkView,
DcImageLinkView,
DynamicContentToolOptions
DynamicContentToolOptions,
ContentTypeExtensionSettings,
OldContentTypeExtensionSettings
} from "@dc-extension-rich-text/prosemirror-dynamic-content";
import { RichTextDialogsContext } from "../RichTextDialogs";

Expand All @@ -32,7 +34,7 @@ export const styles = {
boxSizing: "border-box" as "border-box",
"-webkit-font-smoothing": "auto",
fontFamily: "roboto,sans-serif!important"
}
},
};

export interface EditorRichTextFieldProps extends WithStyles<typeof styles> {
Expand Down Expand Up @@ -69,9 +71,9 @@ export interface EditorRichTextFieldParams {

"dc-content-link"?: {
contentTypes?: string[];
contentTypeSettings?: ContentTypeSettings & {
aspectRatios?: { [schemaId: string]: string };
};
contentTypeSettings?:
| ContentTypeExtensionSettings[]
| OldContentTypeExtensionSettings;
};
};
}
Expand Down Expand Up @@ -127,7 +129,7 @@ const EditorRichTextField: React.SFC<EditorRichTextFieldProps> = (
new DcImageLinkView(node, view, getPos, toolOptions),
"dc-content-link": (node: any, view: any, getPos: any) =>
new DcContentLinkView(node, view, getPos, toolOptions)
}
},
};
}, [sdk, toolOptions]);

Expand Down
12 changes: 12 additions & 0 deletions packages/prosemirror-dynamic-content/src/ContentTypeExtensionSettings.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,12 @@
import { ContentTypeSettings } from "unofficial-dynamic-content-ui";

export interface ContentTypeExtensionSettings {
id: string;
icon?: string;
card?: string;
aspectRatio?: string;
}

export type OldContentTypeExtensionSettings = ContentTypeSettings & {
aspectRatios?: { [schemaId: string]: string };
};
156 changes: 154 additions & 2 deletions packages/prosemirror-dynamic-content/src/DcContentLink/DcContentLinkNode.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,157 @@ storiesOf("DcContentLinkNode", module)
})

.add("Custom Icon", () => {
const { container } = createEditor({
...editorSettings,

modifyOptions: (options: any) => {
return {
...options,
nodeViews: {
"dc-content-link": (node: any, view: any, getPos: any) =>
new DcContentLinkView(node, view, getPos, {
tools: {
"dc-content-link": {
contentTypeSettings: [
{
id: "https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json",
icon: "https://bigcontent.io/cms/icons/ca-types-article.png"
}
]
}
}
})
}
};
},

doc: {
type: "doc",
content: [
{
type: "dc-content-link",
attrs: {
value: {
_meta: {
schema:
"http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
},
contentType:
"https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json",
id: "c6f77ffc-9d70-45e9-b322-89d4436b8774"
}
}
}
]
}
});
return container;
})

.add("Card", () => {
const { container } = createEditor({
...editorSettings,

modifyOptions: (options: any) => {
return {
...options,
nodeViews: {
"dc-content-link": (node: any, view: any, getPos: any) =>
new DcContentLinkView(node, view, getPos, {
dynamicContent: {
stagingEnvironment:
"8d0nfe8p86q314k885enoody0.staging.bigcontent.io"
},
tools: {
"dc-content-link": {
contentTypeSettings: [
{
id: "https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json",
card: "https://d3rcavkmxce5gq.cloudfront.net/preview/card?vse={{vse.domain}}&content={{content.sys.id}}"
}
]
}
}
})
}
};
},

doc: {
type: "doc",
content: [
{
type: "dc-content-link",
attrs: {
value: {
_meta: {
schema:
"http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
},
contentType:
"https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json",
id: "c6f77ffc-9d70-45e9-b322-89d4436b8774"
}
}
}
]
}
});
return container;
})
.add("Custom Aspect Ratio", () => {
const { container } = createEditor({
...editorSettings,

modifyOptions: (options: any) => {
return {
...options,
nodeViews: {
"dc-content-link": (node: any, view: any, getPos: any) =>
new DcContentLinkView(node, view, getPos, {
dynamicContent: {
stagingEnvironment:
"8d0nfe8p86q314k885enoody0.staging.bigcontent.io"
},
tools: {
"dc-content-link": {
contentTypeSettings: [
{
id: "https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json",
card: "https://d3rcavkmxce5gq.cloudfront.net/preview/card?vse={{vse.domain}}&content={{content.sys.id}}",
aspectRatio: "1:1"
}
]
}
}
})
}
};
},

doc: {
type: "doc",
content: [
{
type: "dc-content-link",
attrs: {
value: {
_meta: {
schema:
"http://bigcontent.io/cms/schema/v1/core#/definitions/content-link"
},
contentType:
"https://raw.githubusercontent.com/neilmistryamplience/dc-example-website/willow/content-types/card.json",
id: "c6f77ffc-9d70-45e9-b322-89d4436b8774"
}
}
}
]
}
});
return container;
})
.add("Custom Icon (old)", () => {
const { container } = createEditor({
...editorSettings,

Expand Down Expand Up @@ -125,7 +276,7 @@ storiesOf("DcContentLinkNode", module)
return container;
})

.add("Card", () => {
.add("Card (old)", () => {
const { container } = createEditor({
...editorSettings,

Expand Down Expand Up @@ -177,7 +328,7 @@ storiesOf("DcContentLinkNode", module)
});
return container;
})
.add("Custom Aspect Ratio", () => {
.add("Custom Aspect Ratio (old)", () => {
const { container } = createEditor({
...editorSettings,

Expand Down Expand Up @@ -233,3 +384,4 @@ storiesOf("DcContentLinkNode", module)
});
return container;
});

39 changes: 36 additions & 3 deletions packages/prosemirror-dynamic-content/src/DcContentLink/DcContentLinkView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import { WithStyles, withStyles } from '@material-ui/core';
import clsx from 'clsx';

import { DynamicContentToolOptions } from '../DynamicContentTools/DynamicContentToolOptions';
import { ContentTypeExtensionSettings, OldContentTypeExtensionSettings } from '../ContentTypeExtensionSettings';

const styles = {
root: {
Expand Down Expand Up @@ -47,6 +48,36 @@ interface Props extends WithStyles<typeof styles> {
onDelete: () => void;
}

const convertSettings = (settings: ContentTypeExtensionSettings[] | OldContentTypeExtensionSettings | undefined) : OldContentTypeExtensionSettings | undefined => {
if (settings === undefined) {
return undefined;
} else if (Array.isArray(settings)) {
const result: OldContentTypeExtensionSettings = {
cards: {},
icons: {},
aspectRatios: {}
}

settings.forEach(setting => {
if (setting.card) {
result.cards[setting.id] = setting.card;
}

if (setting.icon) {
result.icons[setting.id] = setting.icon;
}

if (setting.aspectRatio && result.aspectRatios) {
result.aspectRatios[setting.id] = setting.aspectRatio;
}
});

return result;
} else {
return settings;
}
}

const ViewComponent = withStyles(styles)((props: Props) => {
const {
node,
Expand All @@ -60,9 +91,11 @@ const ViewComponent = withStyles(styles)((props: Props) => {

const contentLinkOptions = options.tools && options.tools["dc-content-link"] ? options.tools["dc-content-link"] : undefined;

const customIcon: string | undefined = contentLinkOptions && contentLinkOptions.contentTypeSettings && hasValidValue ? getContentTypeIcon(contentLinkOptions.contentTypeSettings, value.contentType) : undefined;
const cardTemplateUrl: string | undefined = contentLinkOptions && contentLinkOptions.contentTypeSettings && hasValidValue ? getContentTypeCard(contentLinkOptions.contentTypeSettings, value.contentType) : undefined;
const aspectRatio = contentLinkOptions && contentLinkOptions.contentTypeSettings && contentLinkOptions.contentTypeSettings.aspectRatios && hasValidValue ? getContentTypeAspectRatio(contentLinkOptions.contentTypeSettings.aspectRatios, value.contentType) : undefined;
const settings = contentLinkOptions ? convertSettings(contentLinkOptions.contentTypeSettings) : undefined;

const customIcon: string | undefined = settings && hasValidValue ? getContentTypeIcon(settings, value.contentType) : undefined;
const cardTemplateUrl: string | undefined = settings && hasValidValue ? getContentTypeCard(settings, value.contentType) : undefined;
const aspectRatio = settings && settings.aspectRatios && hasValidValue ? getContentTypeAspectRatio(settings.aspectRatios, value.contentType) : undefined;

//Workaround for ts-jest
const Fab: any = StyledFab as any;
Expand Down
Loading

0 comments on commit 7cff061

Please sign in to comment.