lkb-fields-document 1.0.0

package/component-blocks/dist/lkb-fields-document-component-blocks.cjs.d.ts

@@ -0,0 +1,2 @@
+export * from "../../dist/declarations/src/component-blocks.js";
+//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibGtiLWZpZWxkcy1kb2N1bWVudC1jb21wb25lbnQtYmxvY2tzLmNqcy5kLnRzIiwic291cmNlUm9vdCI6IiIsInNvdXJjZXMiOlsiLi4vLi4vZGlzdC9kZWNsYXJhdGlvbnMvc3JjL2NvbXBvbmVudC1ibG9ja3MuZC50cyJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSJ9

package/component-blocks/dist/lkb-fields-document-component-blocks.cjs.js

@@ -0,0 +1,306 @@
+'use client';
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var api = require('../../dist/api-73636987.cjs.js');
+var jsxRuntime = require('react/jsx-runtime');
+var layout = require('@keystar/ui/layout');
+var style = require('@keystar/ui/style');
+var callout_ui = require('../../dist/callout-ui-2aded278.cjs.js');
+require('lkb-core');
+require('@keystar/ui/button');
+require('@keystar/ui/drag-and-drop');
+require('react');
+require('../../dist/index-06c36775.cjs.js');
+require('slate');
+require('@braintree/sanitize-url');
+require('@react-aria/i18n');
+require('@keystar/ui/number-field');
+require('@keystar/ui/picker');
+require('@keystar/ui/combobox');
+require('@keystar/ui/text-field');
+require('@keystar/ui/tag');
+require('@keystar/ui/typography');
+require('@keystar/ui/checkbox');
+
+const quoteBlock = api.component({
+  preview: props => {
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      style: {
+        borderLeft: '3px solid #CBD5E0',
+        paddingLeft: 16
+      },
+      children: [/*#__PURE__*/jsxRuntime.jsx("div", {
+        style: {
+          fontStyle: 'italic',
+          color: '#4A5568'
+        },
+        children: props.fields.content.element
+      }), /*#__PURE__*/jsxRuntime.jsxs("div", {
+        style: {
+          fontWeight: 'bold',
+          color: '#718096'
+        },
+        children: [/*#__PURE__*/jsxRuntime.jsx(api.NotEditable, {
+          children: "\u2014 "
+        }), props.fields.attribution.element]
+      })]
+    });
+  },
+  label: '内容引用',
+  schema: {
+    content: api.fields.child({
+      kind: 'block',
+      placeholder: 'Quote...',
+      formatting: {
+        inlineMarks: 'inherit',
+        softBreaks: 'inherit'
+      },
+      links: 'inherit'
+    }),
+    attribution: api.fields.child({
+      kind: 'inline',
+      placeholder: 'Attribution...'
+    })
+  },
+  chromeless: true
+});
+
+const carousel = api.component({
+  label: '旋转木马',
+  preview: function Preview(props) {
+    return /*#__PURE__*/jsxRuntime.jsx(api.NotEditable, {
+      children: /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style.css({
+          overflowY: 'scroll',
+          display: 'flex',
+          scrollSnapType: 'y mandatory'
+        }),
+        children: props.fields.items.elements.map(item => {
+          return /*#__PURE__*/jsxRuntime.jsxs(layout.Box, {
+            margin: "xsmall",
+            className: style.css({
+              minWidth: '61.8%',
+              scrollSnapAlign: 'center',
+              scrollSnapStop: 'always',
+              margin: 4,
+              padding: 8,
+              boxSizing: 'border-box',
+              borderRadius: 6,
+              background: '#eff3f6'
+            }),
+            children: [/*#__PURE__*/jsxRuntime.jsx("img", {
+              role: "presentation",
+              src: item.fields.imageSrc.value,
+              className: style.css({
+                objectFit: 'cover',
+                objectPosition: 'center center',
+                height: 240,
+                width: '100%',
+                borderRadius: 4
+              })
+            }), /*#__PURE__*/jsxRuntime.jsx("h1", {
+              className: style.css({
+                '&&': {
+                  fontSize: '1.25rem',
+                  lineHeight: 'unset',
+                  marginTop: 8
+                }
+              }),
+              children: item.fields.title.value
+            })]
+          }, item.key);
+        })
+      })
+    });
+  },
+  schema: {
+    items: api.fields.array(api.fields.object({
+      title: api.fields.text({
+        label: '标题'
+      }),
+      imageSrc: api.fields.url({
+        label: '图片 URL',
+        defaultValue: '/assets/images/placeholder.jpeg'
+      })
+    }))
+  }
+});
+
+const callout = api.component({
+  preview: function (props) {
+    return /*#__PURE__*/jsxRuntime.jsx(callout_ui.Callout, {
+      tone: props.fields.tone.value,
+      children: props.fields.content.element
+    });
+  },
+  label: '提示面板',
+  chromeless: true,
+  schema: {
+    tone: api.fields.select({
+      label: 'Tone',
+      options: [{
+        value: 'info',
+        label: '消息'
+      }, {
+        value: 'caution',
+        label: '警告'
+      }, {
+        value: 'positive',
+        label: '成功'
+      }, {
+        value: 'critical',
+        label: '错误'
+      }],
+      defaultValue: 'info'
+    }),
+    content: api.fields.child({
+      kind: 'block',
+      placeholder: '',
+      formatting: 'inherit',
+      dividers: 'inherit',
+      links: 'inherit'
+    })
+  },
+  toolbar({
+    props,
+    onRemove
+  }) {
+    return /*#__PURE__*/jsxRuntime.jsx(callout_ui.CalloutToolbar, {
+      onChange: tone => {
+        props.fields.tone.onChange(tone);
+      },
+      onRemove: onRemove,
+      tone: props.fields.tone.value,
+      tones: props.fields.tone.schema.options
+    });
+  }
+});
+
+// 上传函数
+async function uploadImage(albumId, file, name, altText) {
+  const operations = {
+    variables: {
+      data: {
+        name,
+        altText,
+        image: {
+          upload: null
+        },
+        album: {
+          connect: {
+            id: albumId
+          }
+        }
+      }
+    },
+    query: `mutation ($data: ImageCreateInput!) {
+      item: createImage(data: $data) {
+        id
+        name
+        image { url }
+        album { id name }
+        __typename
+      }
+    }`
+  };
+  const map = {
+    '1': ['variables.data.image.upload']
+  };
+
+  // useMutation
+  const formData = new FormData();
+  formData.append('operations', JSON.stringify(operations));
+  formData.append('map', JSON.stringify(map));
+  formData.append('1', file); // 这里的 '1' 对应 map 中的键
+
+  try {
+    const response = await fetch('/api/graphql', {
+      method: 'POST',
+      body: formData,
+      headers: {
+        'x-apollo-operation-name': 'UploadImage',
+        'apollo-require-preflight': 'true'
+      }
+      // 注意：不要手动设置 Content-Type，浏览器会自动设置正确的 boundary
+    });
+    const result = await response.json();
+    if (result.errors) {
+      throw new Error(result.errors[0].message);
+    }
+    return result.data.item;
+  } catch (error) {
+    console.log('上传失败:', error);
+    throw error;
+  }
+}
+
+const Image = api.component({
+  label: '图片',
+  schema: {
+    webImageUrl: api.fields.text({
+      label: 'Web 图片地址'
+    }),
+    uploadedImageUrl: api.fields.file({
+      label: '使用上传的图片',
+      allowedFileTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/webp'],
+      isImage: true,
+      onUpload(file) {
+        // console.log(file)
+        return new Promise((resolve, reject) => {
+          // 使用固定的 albumId：cmhepys2l0000dd2m4cxaozc8，文档相关的临时图片都存放在这儿。
+          try {
+            uploadImage('cmhepys2l0000dd2m4cxaozc8', file, file.name).then(ret => resolve(ret.image.url)).catch(reject);
+          } catch (e) {
+            reject(e);
+          }
+        });
+      }
+    }),
+    caption: api.fields.conditional(api.fields.checkbox({
+      label: '显示图片描述'
+    }), {
+      false: api.fields.empty(),
+      true: api.fields.child({
+        kind: 'block',
+        placeholder: '输入图片描述',
+        formatting: 'inherit',
+        links: 'inherit'
+      })
+    })
+  },
+  preview: function Image(props) {
+    const imageUrl = props.fields.webImageUrl.value || props.fields.uploadedImageUrl.value || '/assets/images/placeholder.jpeg';
+    return /*#__PURE__*/jsxRuntime.jsxs("div", {
+      children: [/*#__PURE__*/jsxRuntime.jsx(api.NotEditable, {
+        children: /*#__PURE__*/jsxRuntime.jsx("img", {
+          src: imageUrl,
+          className: style.css({
+            display: 'block',
+            width: '100%',
+            minHeight: 10
+          })
+        })
+      }), props.fields.caption.discriminant ? /*#__PURE__*/jsxRuntime.jsx("div", {
+        className: style.css({
+          textAlign: 'center',
+          marginTop: 5
+        }),
+        children: props.fields.caption.value.element
+      }) : null]
+    });
+  }
+});
+
+const componentBlocks = {
+  quoteBlock,
+  carousel,
+  callout,
+  Image
+};
+
+exports.NotEditable = api.NotEditable;
+exports.component = api.component;
+exports.fields = api.fields;
+exports.componentBlocks = componentBlocks;

package/component-blocks/dist/lkb-fields-document-component-blocks.esm.js

@@ -0,0 +1,300 @@
+'use client';
+import { c as component, N as NotEditable, f as fields } from '../../dist/api-2f524611.esm.js';
+export { N as NotEditable, c as component, f as fields } from '../../dist/api-2f524611.esm.js';
+import { jsxs, jsx } from 'react/jsx-runtime';
+import { Box } from '@keystar/ui/layout';
+import { css } from '@keystar/ui/style';
+import { Callout, CalloutToolbar } from '../../dist/callout-ui-8b5f2376.esm.js';
+import 'lkb-core';
+import '@keystar/ui/button';
+import '@keystar/ui/drag-and-drop';
+import 'react';
+import '../../dist/index-67d52357.esm.js';
+import 'slate';
+import '@braintree/sanitize-url';
+import '@react-aria/i18n';
+import '@keystar/ui/number-field';
+import '@keystar/ui/picker';
+import '@keystar/ui/combobox';
+import '@keystar/ui/text-field';
+import '@keystar/ui/tag';
+import '@keystar/ui/typography';
+import '@keystar/ui/checkbox';
+
+const quoteBlock = component({
+  preview: props => {
+    return /*#__PURE__*/jsxs("div", {
+      style: {
+        borderLeft: '3px solid #CBD5E0',
+        paddingLeft: 16
+      },
+      children: [/*#__PURE__*/jsx("div", {
+        style: {
+          fontStyle: 'italic',
+          color: '#4A5568'
+        },
+        children: props.fields.content.element
+      }), /*#__PURE__*/jsxs("div", {
+        style: {
+          fontWeight: 'bold',
+          color: '#718096'
+        },
+        children: [/*#__PURE__*/jsx(NotEditable, {
+          children: "\u2014 "
+        }), props.fields.attribution.element]
+      })]
+    });
+  },
+  label: '内容引用',
+  schema: {
+    content: fields.child({
+      kind: 'block',
+      placeholder: 'Quote...',
+      formatting: {
+        inlineMarks: 'inherit',
+        softBreaks: 'inherit'
+      },
+      links: 'inherit'
+    }),
+    attribution: fields.child({
+      kind: 'inline',
+      placeholder: 'Attribution...'
+    })
+  },
+  chromeless: true
+});
+
+const carousel = component({
+  label: '旋转木马',
+  preview: function Preview(props) {
+    return /*#__PURE__*/jsx(NotEditable, {
+      children: /*#__PURE__*/jsx("div", {
+        className: css({
+          overflowY: 'scroll',
+          display: 'flex',
+          scrollSnapType: 'y mandatory'
+        }),
+        children: props.fields.items.elements.map(item => {
+          return /*#__PURE__*/jsxs(Box, {
+            margin: "xsmall",
+            className: css({
+              minWidth: '61.8%',
+              scrollSnapAlign: 'center',
+              scrollSnapStop: 'always',
+              margin: 4,
+              padding: 8,
+              boxSizing: 'border-box',
+              borderRadius: 6,
+              background: '#eff3f6'
+            }),
+            children: [/*#__PURE__*/jsx("img", {
+              role: "presentation",
+              src: item.fields.imageSrc.value,
+              className: css({
+                objectFit: 'cover',
+                objectPosition: 'center center',
+                height: 240,
+                width: '100%',
+                borderRadius: 4
+              })
+            }), /*#__PURE__*/jsx("h1", {
+              className: css({
+                '&&': {
+                  fontSize: '1.25rem',
+                  lineHeight: 'unset',
+                  marginTop: 8
+                }
+              }),
+              children: item.fields.title.value
+            })]
+          }, item.key);
+        })
+      })
+    });
+  },
+  schema: {
+    items: fields.array(fields.object({
+      title: fields.text({
+        label: '标题'
+      }),
+      imageSrc: fields.url({
+        label: '图片 URL',
+        defaultValue: '/assets/images/placeholder.jpeg'
+      })
+    }))
+  }
+});
+
+const callout = component({
+  preview: function (props) {
+    return /*#__PURE__*/jsx(Callout, {
+      tone: props.fields.tone.value,
+      children: props.fields.content.element
+    });
+  },
+  label: '提示面板',
+  chromeless: true,
+  schema: {
+    tone: fields.select({
+      label: 'Tone',
+      options: [{
+        value: 'info',
+        label: '消息'
+      }, {
+        value: 'caution',
+        label: '警告'
+      }, {
+        value: 'positive',
+        label: '成功'
+      }, {
+        value: 'critical',
+        label: '错误'
+      }],
+      defaultValue: 'info'
+    }),
+    content: fields.child({
+      kind: 'block',
+      placeholder: '',
+      formatting: 'inherit',
+      dividers: 'inherit',
+      links: 'inherit'
+    })
+  },
+  toolbar({
+    props,
+    onRemove
+  }) {
+    return /*#__PURE__*/jsx(CalloutToolbar, {
+      onChange: tone => {
+        props.fields.tone.onChange(tone);
+      },
+      onRemove: onRemove,
+      tone: props.fields.tone.value,
+      tones: props.fields.tone.schema.options
+    });
+  }
+});
+
+// 上传函数
+async function uploadImage(albumId, file, name, altText) {
+  const operations = {
+    variables: {
+      data: {
+        name,
+        altText,
+        image: {
+          upload: null
+        },
+        album: {
+          connect: {
+            id: albumId
+          }
+        }
+      }
+    },
+    query: `mutation ($data: ImageCreateInput!) {
+      item: createImage(data: $data) {
+        id
+        name
+        image { url }
+        album { id name }
+        __typename
+      }
+    }`
+  };
+  const map = {
+    '1': ['variables.data.image.upload']
+  };
+
+  // useMutation
+  const formData = new FormData();
+  formData.append('operations', JSON.stringify(operations));
+  formData.append('map', JSON.stringify(map));
+  formData.append('1', file); // 这里的 '1' 对应 map 中的键
+
+  try {
+    const response = await fetch('/api/graphql', {
+      method: 'POST',
+      body: formData,
+      headers: {
+        'x-apollo-operation-name': 'UploadImage',
+        'apollo-require-preflight': 'true'
+      }
+      // 注意：不要手动设置 Content-Type，浏览器会自动设置正确的 boundary
+    });
+    const result = await response.json();
+    if (result.errors) {
+      throw new Error(result.errors[0].message);
+    }
+    return result.data.item;
+  } catch (error) {
+    console.log('上传失败:', error);
+    throw error;
+  }
+}
+
+const Image = component({
+  label: '图片',
+  schema: {
+    webImageUrl: fields.text({
+      label: 'Web 图片地址'
+    }),
+    uploadedImageUrl: fields.file({
+      label: '使用上传的图片',
+      allowedFileTypes: ['image/png', 'image/jpg', 'image/jpeg', 'image/gif', 'image/webp'],
+      isImage: true,
+      onUpload(file) {
+        // console.log(file)
+        return new Promise((resolve, reject) => {
+          // 使用固定的 albumId：cmhepys2l0000dd2m4cxaozc8，文档相关的临时图片都存放在这儿。
+          try {
+            uploadImage('cmhepys2l0000dd2m4cxaozc8', file, file.name).then(ret => resolve(ret.image.url)).catch(reject);
+          } catch (e) {
+            reject(e);
+          }
+        });
+      }
+    }),
+    caption: fields.conditional(fields.checkbox({
+      label: '显示图片描述'
+    }), {
+      false: fields.empty(),
+      true: fields.child({
+        kind: 'block',
+        placeholder: '输入图片描述',
+        formatting: 'inherit',
+        links: 'inherit'
+      })
+    })
+  },
+  preview: function Image(props) {
+    const imageUrl = props.fields.webImageUrl.value || props.fields.uploadedImageUrl.value || '/assets/images/placeholder.jpeg';
+    return /*#__PURE__*/jsxs("div", {
+      children: [/*#__PURE__*/jsx(NotEditable, {
+        children: /*#__PURE__*/jsx("img", {
+          src: imageUrl,
+          className: css({
+            display: 'block',
+            width: '100%',
+            minHeight: 10
+          })
+        })
+      }), props.fields.caption.discriminant ? /*#__PURE__*/jsx("div", {
+        className: css({
+          textAlign: 'center',
+          marginTop: 5
+        }),
+        children: props.fields.caption.value.element
+      }) : null]
+    });
+  }
+});
+
+const componentBlocks = {
+  quoteBlock,
+  carousel,
+  callout,
+  Image
+};
+
+export { componentBlocks };