impl importing template plugins

packages/app/src/components/PageEditor.tsx

@@ -85,6 +85,7 @@ const PageEditor = React.memo((): JSX.Element => {
 
   // register to facade
   useEffect(() => {
+    // for markdownRenderer
     registerGrowiFacade({
       markdownRenderer: {
         optionsMutators: {

packages/app/src/components/TemplateModal.tsx

@@ -14,12 +14,14 @@ import Preview from './PageEditor/Preview';
 
 
 type ITemplate = {
+  id: string,
   name: string,
   markdown: string,
 }
 
 const templates: ITemplate[] = [
   {
+    id: '__preset1__',
     name: 'WESEEK Inner Wiki Style',
     markdown: `# 関連ページ
 
@@ -28,6 +30,7 @@ $lsx()
 # `,
   },
   {
+    id: '__preset2__',
     name: 'Qiita Style',
     markdown: `# <会議体名>
 ## 日時
@@ -65,10 +68,10 @@ type TemplateRadioButtonProps = {
 }
 
 const TemplateRadioButton = ({ template, onChange, isSelected }: TemplateRadioButtonProps): JSX.Element => {
-  const radioButtonId = `rb-${template.name}`;
+  const radioButtonId = `rb-${template.id}`;
 
   return (
-    <div key={template.name} className="custom-control custom-radio mb-2">
+    <div key={template.id} className="custom-control custom-radio mb-2">
       <input
         id={radioButtonId}
         type="radio"
@@ -120,10 +123,10 @@ export const TemplateModal = (props: Props): JSX.Element => {
           <div className="col-12">
             { templates.map(template => (
               <TemplateRadioButton
-                key={template.name}
+                key={template.id}
                 template={template}
                 onChange={t => setSelectedTemplate(t)}
-                isSelected={template.name === selectedTemplate?.name}
+                isSelected={template.id === selectedTemplate?.id}
               />
             )) }
           </div>

packages/app/src/pages/_document.page.tsx

@@ -23,6 +23,17 @@ const growiPluginsExample: GrowiPlugin[] = [
       types: [GrowiPluginResourceType.Script],
     },
   },
+  {
+    isEnabled: true,
+    installedPath: 'weseek/growi-plugin-markdown-templates',
+    origin: {
+      url: 'https://github.com/weseek/growi-plugin-markdown-templates',
+    },
+    meta: {
+      name: 'weseek/growi-plugin-markdown-templates',
+      types: [GrowiPluginResourceType.Template],
+    },
+  },
 ];
 // ------------------
 
@@ -37,6 +48,16 @@ const HeadersForGrowiPlugin = (props: HeadersForGrowiPluginProps): JSX.Element =
   return (
     <>
       { pluginManifestEntries.map(([growiPlugin, manifest]) => {
+        // type: template
+        if (growiPlugin.meta.types.includes(GrowiPluginResourceType.Template)) {
+          return (
+            <>
+              {/* eslint-disable-next-line @next/next/no-sync-scripts */ }
+              <script type="module" key={`script_${growiPlugin.installedPath}`}
+                src={`/plugins/${growiPlugin.installedPath}/dist/${manifest['client-entry.tsx'].file}`} />
+            </>
+          );
+        }
         // type: script
         if (growiPlugin.meta.types.includes(GrowiPluginResourceType.Script)) {
           return (

packages/core/src/index.ts

@@ -22,6 +22,7 @@ export * from './interfaces/page';
 export * from './interfaces/revision';
 export * from './interfaces/subscription';
 export * from './interfaces/tag';
+export * from './interfaces/template';
 export * from './interfaces/user';
 export * from './plugin/service/tag-cache-manager';
 export * from './models/devided-page-path';

packages/core/src/interfaces/growi-facade.ts

@@ -1,3 +1,5 @@
+import { ITemplate } from './template';
+
 export type GrowiFacade = {
   markdownRenderer?: {
     optionsGenerators?: {
@@ -7,5 +9,8 @@ export type GrowiFacade = {
       customGeneratePreviewOptions?: any;
     },
     optionsMutators?: any,
+  },
+  customTemplates?: {
+    [pluginName: string]: ITemplate,
   }
 };

packages/core/src/interfaces/template.ts

@@ -0,0 +1,5 @@
+export type ITemplate = {
+  id: string,
+  name: string,
+  markdown: string,
+}