├── hello.json ├── README.md ├── components ├── controls │ ├── draggable │ │ ├── draggable.module.css │ │ ├── index.ts │ │ ├── draggable-list.module.css │ │ ├── draggable.tsx │ │ └── draggable-list.tsx │ ├── icon-button │ │ ├── index.ts │ │ ├── icon-button.module.css │ │ └── icon-button.tsx │ ├── insert-slice │ │ ├── index.ts │ │ ├── insert-slice.module.css │ │ └── insert-slice.tsx │ ├── document-options │ │ ├── document-options.tsx │ │ └── document-options.module.css │ ├── slice-options │ │ ├── slice-option.module.css │ │ └── slice-option.tsx │ └── publishing-options │ │ ├── publishing-option.tsx │ │ └── publishing-option.module.css ├── editorTabs │ ├── index.ts │ ├── editorTabs.tsx │ └── editorTabs.module.css ├── layouts │ ├── box │ │ ├── index.ts │ │ └── box.tsx │ ├── by-side │ │ ├── index.ts │ │ ├── by-side.module.css │ │ └── by-side.tsx │ └── v-stack │ │ ├── vstack.module.css │ │ └── vstack.tsx ├── cards │ ├── slice │ │ ├── index.ts │ │ ├── slice.module.css │ │ └── slice.tsx │ └── variation │ │ ├── index.ts │ │ ├── variation.tsx │ │ └── variation.module.css ├── dialogs │ ├── index.ts │ ├── select-image │ │ ├── select-image.module.css │ │ └── select-image.tsx │ ├── root-dialog.tsx │ ├── dialog-layout │ │ ├── dialog-layout.module.css │ │ └── dialog-layout.tsx │ ├── select-slice │ │ ├── select-slice.module.css │ │ └── select-slice.tsx │ └── schedule-document │ │ ├── schedule-document.module.css │ │ └── schedule-document.tsx ├── documentName │ ├── index.ts │ ├── documentName.tsx │ └── documentName.module.css ├── versionPanel │ ├── index.ts │ ├── versionPanel.module.css │ └── versionPanel.tsx ├── publishOptions │ ├── index.ts │ ├── publishOptions.module.css │ └── publishOptions.tsx ├── displays │ └── placeholder │ │ ├── index.ts │ │ ├── placeholder.module.css │ │ └── placeholder.tsx ├── form │ ├── fields │ │ ├── simpleField.js │ │ ├── textArea.js │ │ ├── selectField.module.css │ │ ├── selectField.js │ │ ├── simpleField.module.css │ │ ├── Image.js │ │ ├── image.module.css │ │ ├── richText.module.css │ │ ├── slashCommands.js │ │ └── richText.js │ ├── context.js │ ├── useOnWindowResize.js │ ├── form.module.css │ ├── StaticZone.js │ └── form.js └── slash │ ├── styles.module.css │ └── index.js ├── public ├── tile.png ├── favicon.ico ├── slices-thumbnails │ ├── a.png │ ├── b.png │ ├── c.png │ ├── d.png │ ├── gumroad-1.png │ ├── call-to-action.png │ ├── header-static.png │ ├── heading-section.png │ ├── feature-text-left.png │ ├── feature-text-right.png │ ├── heading-section-image.png │ ├── testimonial-text-left.png │ ├── testimonial-text-right.png │ ├── heading-section-with-link.png │ ├── heading-section-with-subheading.png │ ├── feature-multiple-paragraph-text-left.png │ └── feature-multiple-paragraph-text-right.png ├── icons │ ├── InsertSliceIcon.svg │ ├── Page.svg │ ├── upload.svg │ └── Slicemachine.svg └── vercel.svg ├── .eslintrc.json ├── .prettierrc ├── next.config.js ├── types └── slice.d.ts ├── postcss.config.js ├── pages ├── api │ └── hello.ts ├── _app.tsx └── index.tsx ├── models ├── index.ts ├── dialog.ts ├── library.ts └── editor.ts ├── styles ├── globals.css ├── reset.css └── Home.module.css ├── .gitignore ├── tsconfig.json ├── mocks ├── static.json ├── static-filled.json ├── slices.json └── filled.json ├── package.json └── token.config.json /hello.json: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | Editor 2 | # editor-prototype 3 | -------------------------------------------------------------------------------- /components/controls/draggable/draggable.module.css: -------------------------------------------------------------------------------- 1 | -------------------------------------------------------------------------------- /components/editorTabs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './editorTabs' -------------------------------------------------------------------------------- /components/layouts/box/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./box"; 2 | -------------------------------------------------------------------------------- /components/cards/slice/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./slice"; 2 | -------------------------------------------------------------------------------- /components/dialogs/index.ts: -------------------------------------------------------------------------------- 1 | export * from './root-dialog' 2 | -------------------------------------------------------------------------------- /components/layouts/by-side/index.ts: -------------------------------------------------------------------------------- 1 | export * from './by-side' -------------------------------------------------------------------------------- /components/cards/variation/index.ts: -------------------------------------------------------------------------------- 1 | export * from './variation' 2 | -------------------------------------------------------------------------------- /components/documentName/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./documentName"; 2 | -------------------------------------------------------------------------------- /components/versionPanel/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./versionPanel"; 2 | -------------------------------------------------------------------------------- /components/publishOptions/index.ts: -------------------------------------------------------------------------------- 1 | export * from "./publishOptions"; 2 | -------------------------------------------------------------------------------- /components/controls/icon-button/index.ts: -------------------------------------------------------------------------------- 1 | export * from './icon-button' 2 | -------------------------------------------------------------------------------- /components/displays/placeholder/index.ts: -------------------------------------------------------------------------------- 1 | export * from './placeholder' 2 | -------------------------------------------------------------------------------- /components/controls/insert-slice/index.ts: -------------------------------------------------------------------------------- 1 | export { InsertSlice } from './insert-slice' 2 | -------------------------------------------------------------------------------- /public/tile.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/tile.png -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/favicon.ico -------------------------------------------------------------------------------- /components/layouts/by-side/by-side.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | flex-wrap: wrap; 4 | } 5 | -------------------------------------------------------------------------------- /public/slices-thumbnails/a.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/a.png -------------------------------------------------------------------------------- /public/slices-thumbnails/b.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/b.png -------------------------------------------------------------------------------- /public/slices-thumbnails/c.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/c.png -------------------------------------------------------------------------------- /public/slices-thumbnails/d.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/d.png -------------------------------------------------------------------------------- /.eslintrc.json: -------------------------------------------------------------------------------- 1 | { 2 | "extends": "next/core-web-vitals", 3 | "rules": { 4 | "react/no-children-prop": "off" 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /components/controls/draggable/index.ts: -------------------------------------------------------------------------------- 1 | export { Draggable } from './draggable' 2 | export { DraggableList } from './draggable-list' 3 | -------------------------------------------------------------------------------- /public/slices-thumbnails/gumroad-1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/gumroad-1.png -------------------------------------------------------------------------------- /.prettierrc: -------------------------------------------------------------------------------- 1 | { 2 | "semi": false, 3 | "trailingComma": "es5", 4 | "singleQuote": true, 5 | "tabWidth": 2, 6 | "useTabs": false 7 | } -------------------------------------------------------------------------------- /public/slices-thumbnails/call-to-action.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/call-to-action.png -------------------------------------------------------------------------------- /public/slices-thumbnails/header-static.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/header-static.png -------------------------------------------------------------------------------- /public/slices-thumbnails/heading-section.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/heading-section.png -------------------------------------------------------------------------------- /public/slices-thumbnails/feature-text-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/feature-text-left.png -------------------------------------------------------------------------------- /public/slices-thumbnails/feature-text-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/feature-text-right.png -------------------------------------------------------------------------------- /components/controls/icon-button/icon-button.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background: rgb(128, 128, 0); 3 | } 4 | 5 | .root:hover { 6 | background: green; 7 | } 8 | -------------------------------------------------------------------------------- /components/displays/placeholder/placeholder.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background: rgb(128, 128, 0); 3 | } 4 | 5 | .root:hover { 6 | background: green; 7 | } 8 | -------------------------------------------------------------------------------- /public/slices-thumbnails/heading-section-image.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/heading-section-image.png -------------------------------------------------------------------------------- /public/slices-thumbnails/testimonial-text-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/testimonial-text-left.png -------------------------------------------------------------------------------- /public/slices-thumbnails/testimonial-text-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/testimonial-text-right.png -------------------------------------------------------------------------------- /public/slices-thumbnails/heading-section-with-link.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/heading-section-with-link.png -------------------------------------------------------------------------------- /public/slices-thumbnails/heading-section-with-subheading.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/heading-section-with-subheading.png -------------------------------------------------------------------------------- /public/slices-thumbnails/feature-multiple-paragraph-text-left.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/feature-multiple-paragraph-text-left.png -------------------------------------------------------------------------------- /public/slices-thumbnails/feature-multiple-paragraph-text-right.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/prismicio/editor-prototype/main/public/slices-thumbnails/feature-multiple-paragraph-text-right.png -------------------------------------------------------------------------------- /components/layouts/v-stack/vstack.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: flex-start; 5 | margin: nil; 6 | padding: nil; 7 | list-style: none; 8 | } 9 | -------------------------------------------------------------------------------- /next.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | trailingSlash: false, 3 | webpack(config) { 4 | config.module.rules.push({ 5 | test: /\.svg$/i, 6 | issuer: /\.[jt]sx?$/, 7 | use: ['@svgr/webpack'], 8 | }) 9 | 10 | return config 11 | }, 12 | } 13 | -------------------------------------------------------------------------------- /types/slice.d.ts: -------------------------------------------------------------------------------- 1 | type SliceType = { 2 | id: string 3 | name: string 4 | variations: Array 5 | image?: string 6 | } 7 | 8 | type VariationType = { 9 | id: string 10 | name: string 11 | image: string 12 | fields: any 13 | sliceName: string 14 | } 15 | -------------------------------------------------------------------------------- /components/cards/slice/slice.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | background: white; 3 | padding: 8px; 4 | border: 1px solid #dcdbdd; 5 | border-radius: 8px; 6 | position: relative; 7 | transition: 100ms ease-in-out; 8 | } 9 | .root:hover{ 10 | border: 1px solid #7C66DC; 11 | cursor: pointer; 12 | } -------------------------------------------------------------------------------- /components/controls/draggable/draggable-list.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | display: flex; 3 | flex-direction: column; 4 | justify-content: flex-start; 5 | margin: 24px; 6 | margin-bottom: 0; 7 | padding: nil; 8 | list-style: none; 9 | margin-inline: lg; 10 | } 11 | 12 | .root::-webkit-scrollbar { 13 | display: none; 14 | } -------------------------------------------------------------------------------- /postcss.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | plugins: { 3 | 'postcss-flexbugs-fixes': {}, 4 | 'postcss-preset-env': { 5 | autoprefixer: { 6 | flexbox: 'no-2009', 7 | }, 8 | stage: 3, 9 | features: { 10 | 'custom-properties': false, 11 | }, 12 | }, 13 | '@tokencss/postcss': {}, 14 | }, 15 | } 16 | -------------------------------------------------------------------------------- /pages/api/hello.ts: -------------------------------------------------------------------------------- 1 | // Next.js API route support: https://nextjs.org/docs/api-routes/introduction 2 | import type { NextApiRequest, NextApiResponse } from 'next' 3 | 4 | type Data = { 5 | name: string 6 | } 7 | 8 | export default function handler( 9 | req: NextApiRequest, 10 | res: NextApiResponse 11 | ) { 12 | res.status(200).json({ name: 'John Doe' }) 13 | } 14 | -------------------------------------------------------------------------------- /models/index.ts: -------------------------------------------------------------------------------- 1 | import { Models } from '@rematch/core' 2 | import { library } from './library' 3 | import { editor } from './editor' 4 | import { dialog } from './dialog' 5 | export interface RootModel extends Models { 6 | library: typeof library 7 | editor: typeof editor 8 | dialog: typeof dialog 9 | } 10 | export const models: RootModel = { library, editor, dialog } 11 | -------------------------------------------------------------------------------- /components/controls/insert-slice/insert-slice.module.css: -------------------------------------------------------------------------------- 1 | .root { 2 | border: none; 3 | padding: xs; 4 | background: transparent; 5 | display: flex; 6 | justify-content: center; 7 | position: relative; 8 | align-items: center; 9 | cursor: pointer; 10 | } 11 | 12 | .root > * { 13 | fill: rgb(224, 224, 224); 14 | transition: 100ms ease-in-out; 15 | } 16 | 17 | .root:hover > * { 18 | fill: #6e56cf; 19 | } 20 | 21 | .dragover > * { 22 | fill: #6e56cf; 23 | } 24 | -------------------------------------------------------------------------------- /styles/globals.css: -------------------------------------------------------------------------------- 1 | @inject "tokencss:base"; 2 | 3 | body { 4 | background: #f9f8f9; 5 | color: #1a1523; 6 | } 7 | 8 | button.secondary { 9 | user-select: none; 10 | padding: 10px 16px; 11 | background: #ffffff; 12 | border: 1px solid #dcdbdd; 13 | box-sizing: border-box; 14 | box-shadow: 0px 1px 0px rgb(0 0 0 / 4%); 15 | border-radius: 6px; 16 | font-style: normal; 17 | font-weight: 500; 18 | font-size: 14px; 19 | line-height: 20px; 20 | color: #1a1523; 21 | } 22 | -------------------------------------------------------------------------------- /components/form/fields/simpleField.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import styles from './simpleField.module.css' 3 | 4 | export default function Field(props) { 5 | return ( 6 |
7 | 8 | 15 |
16 | ) 17 | } 18 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files. 2 | 3 | # dependencies 4 | /node_modules 5 | /.pnp 6 | .pnp.js 7 | 8 | # testing 9 | /coverage 10 | 11 | # next.js 12 | /.next/ 13 | /out/ 14 | 15 | # production 16 | /build 17 | 18 | # misc 19 | .DS_Store 20 | *.pem 21 | 22 | # debug 23 | npm-debug.log* 24 | yarn-debug.log* 25 | yarn-error.log* 26 | .pnpm-debug.log* 27 | 28 | # local env files 29 | .env*.local 30 | 31 | # vercel 32 | .vercel 33 | 34 | # typescript 35 | *.tsbuildinfo 36 | next-env.d.ts 37 | -------------------------------------------------------------------------------- /public/icons/InsertSliceIcon.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /components/displays/placeholder/placeholder.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from 'react' 2 | import clsx from 'clsx' 3 | import { Box } from 'components/layouts/box' 4 | import styles from './placeholder.module.css' 5 | 6 | interface PlaceholderProps { 7 | children?: ReactNode 8 | className?: string 9 | } 10 | 11 | export const Draggable = ({ 12 | children, 13 | className, 14 | ...restProps 15 | }: PlaceholderProps) => { 16 | return ( 17 | 18 | {children} 19 | 20 | ) 21 | } 22 | -------------------------------------------------------------------------------- /components/controls/icon-button/icon-button.tsx: -------------------------------------------------------------------------------- 1 | import { ReactNode } from "react"; 2 | import clsx from "clsx"; 3 | import { Box } from "components/layouts/box"; 4 | import styles from "./icon-button.module.css"; 5 | 6 | interface IconButtonProps { 7 | children?: ReactNode; 8 | className?: string; 9 | } 10 | 11 | export const IconButton = ({ 12 | children, 13 | className, 14 | ...restProps 15 | }: IconButtonProps) => { 16 | return ( 17 | 18 | {children} 19 | 20 | ); 21 | }; 22 | -------------------------------------------------------------------------------- /components/editorTabs/editorTabs.tsx: -------------------------------------------------------------------------------- 1 | import React, { ReactNode, SyntheticEvent } from 'react' 2 | import clsx from 'clsx' 3 | import styles from './editorTabs.module.css' 4 | 5 | interface EditorTabsProps { 6 | } 7 | 8 | export default function EditorTabs({ 9 | ...restProps 10 | }: EditorTabsProps): JSX.Element { 11 | return ( 12 |
13 |
    14 |
  • Main Content
    • 15 |
  • Metadata
    • 16 |
  • Social & SEO
    • 17 |
18 |
19 | ) 20 | } 21 | -------------------------------------------------------------------------------- /components/dialogs/select-image/select-image.module.css: -------------------------------------------------------------------------------- 1 | .galery{ 2 | height: 647px; 3 | overflow-y: scroll; 4 | padding: 16px; 5 | display: grid; 6 | grid-template-columns: repeat(3, 1fr); 7 | column-gap: 16px; 8 | row-gap: 16px; 9 | } 10 | .galery img{ 11 | cursor: pointer; 12 | } 13 | .imageWrapper{ 14 | padding: 10%; 15 | background-color: #DCDBDD; 16 | border-radius: 6px; 17 | border: 2px solid transparent; 18 | display: flex; 19 | align-items: center; 20 | } 21 | .imageWrapper:hover{ 22 | border: 2px solid #FFFFFF; 23 | box-shadow: 0px 0px 0px 2px #6E56CF; 24 | } -------------------------------------------------------------------------------- /components/form/fields/textArea.js: -------------------------------------------------------------------------------- 1 | import React from 'react' 2 | import Slash from '../../slash' 3 | //import BubbleMenu from "../../bubble-menu/bubble-menu"; 4 | import styles from './simpleField.module.css' 5 | 6 | export default function Textarea(props) { 7 | return ( 8 |
9 | 10 |