open-index/open-npm huggingface dataset:
npm package: @groovymedia/easy-email-editor
Description: Email editor
Author: m-Ryan
Latest version: 4.15.0

# Easy-email-editor

## Introduction

Email render and preview container.

## usage

```sh
$ npm install --save easy-email-editor
```

or

```sh
$ yarn add easy-email-editor
```

```js
import React from 'react';
import { BlockManager } from '@groovymedia/easy-email-core';
import { EmailEditor, EmailEditorProvider } from '@groovymedia/easy-email-editor';
import 'easy-email-editor/lib/style.css';

const initialValues = {
  subject: 'Welcome to Easy-email',
  subTitle: 'Nice to meet you!',
  content: BlockManager.getBlockByType(BasicType.PAGE).create({}),
};

export function App() {
  return (
    <EmailEditorProvider
      data={initialValues}
      height={'calc(100vh - 72px)'}
    >
      {({ values }) => {
        return <EmailEditor />;
      }}
    </EmailEditorProvider>
  );
}
```

## customize

If you customize the UI yourself,maybe you need to know

- hooks

  - useActiveTab // current tab is edit or preview
  - useBlock // includes addBlock、moveBlock、removeBlock、undo, redo, etc.
    - values // current block form values
    - change // formHelpers, assign form values `(name: F, value?: any) => void`
    - focusBlock // IBlockData
    - setFocusBlock // set focusBlock values `(values: IBlockData)=>void`
    - setFocusBlockValue // assign focusBlock data values `(values: IBlockData)=>void`
    - setValueByIdx // assign form values by focusIdx `(focusIdx:string, values: IBlockData)=>void`
    - addBlock `(params: {
    type: string;
    parentIdx: string;
    positionIndex?: number;
    payload?: any;
    canReplace?: boolean;
  }) => void`
    - moveBlock // `(sourceIdx: string, destinationIdx: string) => null | undefined`
    - copyBlock // `(idx: string) => void`
    - removeBlock // `(idx: string) => void`
    - isExistBlock // `(idx:string)=>boolean`
    - redo // `() => void`
    - undo // `() => void`
    - reset // `() => void`
    - redoable // `boolean`
    - undoable // `boolean`
  - useHoverIdx // hover block related, dragging status related, dragging direction related
  - useEditorProps // get props from EmailEditorProvider
  - useEditorContext // get form state and initialized status
  - useFocusIdx // focus block related

- utils (These are some very simple methods, it is best to look at the implementation)

  - getBlockNodeByIdx
  - getBlockNodes
  - getShadowRoot
  - scrollBlockEleIntoView

- components
  - BlockAvatarWrapper // allow drag and drop to editor
npm package: @groqfmt/wasm
Description: @groqfmt/wasm is a formatter for [the GROQ query language](https://github.com/sanity-io/GROQ), designed to be compiled to WebAssembly. This tool is largely based on the existing [groqfmt](https://github.com/sanity-io/groqfmt) tool, and built on top of oth
Author: Ash
Latest version: 1.2.2

# @groqfmt/wasm

@groqfmt/wasm is a formatter for [the GROQ query language](https://github.com/sanity-io/GROQ), designed to be compiled to WebAssembly. This tool is largely based on the existing [groqfmt](https://github.com/sanity-io/groqfmt) tool, and built on top of other tools from the GROQ ecosystem.

The formatter is exposed to JS as the global function `groqfmt`.