Function CanvasProvider

src/contexts/canvas.tsx:31–247

({ children }: CanvasProviderProps)

const CanvasContext = createContext<CanvasContextData>({} as CanvasContextData);

const CanvasProvider = ({ children }: CanvasProviderProps) => {
  const [sections, setSections] = usePersistedState<CanvasSection[]>(
    'canvas.sections',
    []
  );

  const [currentSection, setCurrentSection] = useState<CanvasSection>();
  const [previewTemplate, setPreviewTemplate] = useState<CanvasSection[]>([]);

  const { extensions } = useExtensions();

  const handleAddSection = (event: HandleAddSectionArgs) => {
    const sectionType = event.detail;

    const sectionData = extensions.sections[
      sectionType
    ] as CanvasSection['props'];

    const newSection = {
      id: uuid(),
      type: event.detail,
      ...sectionData.defaultConfig,
    };

    setSections(state => [...state, newSection]);
  };

  const loadReadmeFile = async () => {
    document.getElementById('readme-file-import')?.click();
  };

  const importReadme = async (event: ImportReadme) => {
    const file = event?.detail?.target?.files?.[0];
    if (!file) return; // TODO: toast error event
    const text = await file.text();
    const sections = await parseImportedReadme(text);
    handleClearCanvas();
    setSections(sections);
  };

  const handleEditSection = (event: HandleEditSectionArgs) => {
    const { id = currentSection?.id, path, value } = event.detail;

    if (!id) return;

    const obj = sections.find(item => item.id === id)!;

    const result = deepChangeObjectProperty<CanvasSection>({
      obj,
      path,
      value,
    });

    setSections(state =>
      state.map(item => {
        if (item.id === id) return result;
        return item;
      })