canva-editor

Canva Editor

Description

This project is a React.js-based tool designed to provide functionality similar to Canva.com. It utilizes the Vite build tool and manages state with ProseMirror. The tool allows users to create and design content through an intuitive interface.

Demo

Explore the live demo: Try it out!

Get full source code here: https://kenvinlu.gumroad.com/l/canva-editor

Installation

Before you begin, ensure that you have Node.js and Yarn installed on your machine.

1. Clone the repository:

   git clone https://github.com/kenvinlu/canva-editor.git

2. Navigate to the project directory:

   cd canva-editor

3. Install dependencies using Yarn:

   yarn install

Configuration

To customize the tool for your environment, please update the editorConfig.

export type EditorConfig = {
  logoUrl?: string;
  apis: {
    url: string;
    searchFonts: string;
    searchTemplates: string;
    searchTexts: string;
    searchImages: string;
    searchShapes: string;
    searchFrames: string;
    templateKeywordSuggestion: string;
    textKeywordSuggestion: string;
    imageKeywordSuggestion: string;
    shapeKeywordSuggestion: string;
    frameKeywordSuggestion: string;
  };
  placeholders?: {
    searchTemplate?: string;
    searchText?: string;
    searchImage?: string;
    searchShape?: string;
    searchFrame?: string;
  }
  editorAssetsUrl: string;
  imageKeywordSuggestions?: string;
  templateKeywordSuggestions?: string;
};

const editorConfig: EditorConfig = {
  apis: {
    url: 'http://localhost:4000/api',
    searchFonts: '/fonts',
    searchTemplates: '/templates',
    searchTexts: '/texts',
    searchImages: '/images',
    searchShapes: '/shapes',
    searchFrames: '/frames',
    templateKeywordSuggestion: '/template-suggestion',
    textKeywordSuggestion: '/text-suggestion',
    imageKeywordSuggestion: '/image-suggestion',
    shapeKeywordSuggestion: '/shape-suggestion',
    frameKeywordSuggestion: '/frame-suggestion',
  },
  placeholders: {
    searchTemplate: 'Search templates',
    searchText: 'Search texts',
    searchImage: 'Search images',
    searchShape: 'Search shapes',
    searchFrame: 'Search frames'
  },
  editorAssetsUrl: 'http://localhost:4000/editor',
  imageKeywordSuggestions: 'animal,sport,love,scene,dog,cat,whale',
  templateKeywordSuggestions:
    'mother,sale,discount,fashion,model,deal,motivation,quote',
};

Property	Type	Description	Required	Default Value
apis	Object	API endpoints for various functionalities in the tool	Required	-
apis.url	String	Base URL for the API	Required	-
apis.searchFonts	String	Endpoint for searching fonts	Required	'/fonts'
apis.searchTemplates	String	Endpoint for searching templates	Required	'/templates'
apis.searchTexts	String	Endpoint for searching texts	Required	'/texts'
apis.searchImages	String	Endpoint for searching images	Required	'/images'
apis.searchShapes	String	Endpoint for searching shapes	Required	'/shapes'
apis.searchFrames	String	Endpoint for searching frames	Required	'/frames'
apis.templateKeywordSuggestion	String	Endpoint for template keyword suggestions	Required	'/template-suggestion'
apis.textKeywordSuggestion	String	Endpoint for text keyword suggestions	Required	'/text-suggestion'
apis.imageKeywordSuggestion	String	Endpoint for image keyword suggestions	Required	'/image-suggestion'
apis.shapeKeywordSuggestion	String	Endpoint for shape keyword suggestions	Required	'/shape-suggestion'
apis.frameKeywordSuggestion	String	Endpoint for frame keyword suggestions	Required	'/frame-suggestion'
placeholders	Object	Placeholder text for search inputs	Optional	Default values provided below
placeholders.searchTemplate	String	Placeholder text for template search input	Optional	'Search templates'
placeholders.searchText	String	Placeholder text for text search input	Optional	'Search texts'
placeholders.searchImage	String	Placeholder text for image search input	Optional	'Search images'
placeholders.searchShape	String	Placeholder text for shape search input	Optional	'Search shapes'
placeholders.searchFrame	String	Placeholder text for frame search input	Optional	'Search frames'
editorAssetsUrl	String	URL for editor-related assets	Required	-
imageKeywordSuggestions	String	Comma-separated list of image keyword suggestions	Optional	'animal,sport,love,scene,dog,cat,whale'
templateKeywordSuggestions	String	Comma-separated list of template keyword suggestions	Optional	'mother,sale,discount,fashion,model,deal,motivation,quote'

Usage

Example Test Component

Here's an example usage of the CanvaEditor component within a React component:

import { CanvaEditor, EditorConfig } from 'canva-editor';
import { data } from './sampleData';
import { useState } from 'react';

const editorConfig: EditorConfig = {
  logoUrl: './your-logo.png',
  apis: {
    url: 'http://localhost:4000/api',
    searchFonts: '/fonts',
    searchTemplates: '/templates',
    searchTexts: '/texts',
    searchImages: '/images',
    searchShapes: '/shapes',
    searchFrames: '/frames',
    templateKeywordSuggestion: '/template-suggestion',
    textKeywordSuggestion: '/text-suggestion',
    imageKeywordSuggestion: '/image-suggestion',
    shapeKeywordSuggestion: '/shape-suggestion',
    frameKeywordSuggestion: '/frame-suggestion',
  },
  placeholders: {
    searchTemplate: 'Search templates',
    searchText: 'Search texts',
    searchImage: 'Search images',
    searchShape: 'Search shapes',
    searchFrame: 'Search frames',
  },
  editorAssetsUrl: 'http://localhost:4000/editor',
  imageKeywordSuggestions: 'animal,sport,love,scene,dog,cat,whale',
  templateKeywordSuggestions:
    'mother,sale,discount,fashion,model,deal,motivation,quote',
};

const Test = () => {
  const [saving, setSaving] = useState(false);
  const name = '';
  const handleOnChanges = (changes: any) => {
    console.log('On changes');
    console.log(changes);

    setSaving(true);
    setTimeout(() => {
      setSaving(false);
    }, 1e3);
  };

  const handleOnDesignNameChanges = (newName: string) => {
    console.log('On name changes');
    console.log(newName);

    setSaving(true);
    setTimeout(() => {
      setSaving(false);
    }, 1e3);
  };
  return (
    <CanvaEditor
      data={{
        name,
        editorConfig: data,
      }}
      config={editorConfig}
      saving={saving}
      onChanges={handleOnChanges}
      onDesignNameChanges={handleOnDesignNameChanges}
    />
  );
};

export default Test;

Editor Options

The options property in the CanvaEditor component allows you to customize the behavior and appearance of the editor. Below are some key options you can use to tailor the editor to your specific needs:

• saving (Boolean):

  • Description: A flag indicating whether the editor is in a saving state. When set to true, it typically triggers UI changes to indicate that the content is being saved.
  • Default: false

• onChanges (Function):

  • Description: A callback function triggered when content changes occur in the editor. Use this callback to handle any logic or state updates related to changes in the editor content.
  • Default: None (Required)

• onDesignNameChanges (Function):

  • Description: A callback function triggered when the design name changes. This is useful for capturing and handling updates to the design name within the editor.
  • Default: None (Required)

These options provide a way to interact with the editor's state and behavior. Incorporate them into your CanvaEditor instance to enhance the customization of the editor within your React application.

To start the development API server, run:

yarn api

To start the development server, run:

yarn dev

This will launch the tool at http://localhost:5173.

License

This project is licensed under the MIT License with No Resale Clause. See the LICENSE file for details.