Shortcode Test for StaticCMS (warning: this is a work in progress and incomplete)

gistfile1.txt

interface TestShortcodeProps {
  src: string;
}

CMS.registerShortcode<TestShortcodeProps>('test', {
      label: 'test',
      openTag: '[',
      closeTag: ']',
      separator: '|',
      toProps: (args) => {
        if (args.length > 0) {
          return { src: args[0] };
        }

        return { src: '' };
      },
      toArgs: ({ src }) => {
        return [src];
      },
      control: (test) => {
        const { controlProps, onChange, src } = test;
        function handleChange(event) {
          const [file] = event.target.files;
          onChange({ src: URL.createObjectURL(file) });
        }
        return (
          <>
            <span>
              <input key='control-input' id='test' value='' type='file' onChange={handleChange} />
            </span>
            <div key='control-preview'>
              <img src={src} />
            </div>
          </>
        );
      },
      preview: ({ src }) => {
        return h(
          'span',
          {},
          h(
            'iframe',
            {
              width: '420',
              height: '315',
              src: `https://www.youtube.com/embed/${src}`,
            },
            ''
          )
        );
      },
    });