canva-editor v1.0.64

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

Support: Discord

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',
};

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.