marktion

中文/inglês

Introdução de marcação

A Marktion é um editor Wysiwyg Markdown baseado no Prosemirror, dedicado a aprimorar a experiência de edição do Markdown.

Veja nosso site marktion.io em ação.

Características

• [Novo] Integração da IA : interface de conversa interna de IA, suportando extensões de plug-in de IA, invocadas no início de uma linha pressionando espaço;

• Edição Wysiwyg : visualização em tempo real dos resultados da renderização do Markdown, proporcionando uma experiência de edição intuitiva e você pode alternar entre o modo de código-fonte e o modo de edição wysiwyg com Ctrl + /;

• Menu de barra e menu de bolhas : Inspirado rapidamente pelo editor de noção usando /; Suporte ao modo escuro: Suporte para ativar ou desativar o modo escuro.

• Suporte ao modo escuro : Ative o modo escuro para fornecer uma experiência de edição visualmente confortável em ambientes com pouca luz.

Instalação e uso

1. Instalar dependências.

npm intall marktion

2. Uso

 import { ReactEditor } from 'marktion' ;
import 'marktion/dist/style.css' ;

function Editor ( ) {
  return < ReactEditor content = { `# Hello World` } /> ;
}

3. Exemplo

Dê uma olhada nos exemplos para ver a Marktion.io em ação.

API

ReactEditorProps

Propriedade	Descrição	Tipo	Padrão
contente	O conteúdo inicial de remarca para o editor.	corda	-
escuro	Ativar ou desativar o modo escuro no editor.	booleano	falso
uPLOPLOPTIONS.UPLOADER	Função de retorno de chamada para fazer upload de imagens.	(file: File, event: ClipboardEvent | InputEvent, view: ProsemirrorView) => Promise<url>	-
renderizar	modo de renderizador	WYSIWYG | SOURCE
OnChange	Retorno de chamada de alteração do conteúdo do editor	(editor: Marktion) => void

Consulte a documentação da Tipptap para encontrar mais APIs.

MarktionRef

Propriedade	Descrição	Tipo	Padrão
editor	instância de marktion	Marktion	-

Exemplo de uso:

 import { ReactEditor , ReactEditorRef } from 'marktion' ;

function App ( ) {
  const editorRef = useRef < ReactEditorRef > ( null ) ;

  const onExport = ( ) => {
    const content = editorRef . current ?. editor . getContent ( ) ;
    console . log ( content ) ;
  } ;

  return (
    < >
      < button onClick = { onExport } > export </ button >
      < ReactEditor ref = { editorRef } />
    </ >
  ) ;
} 

Plugins

Plugin AI

O plugin AI é baseado no vercel ai. Antes de começar, você precisa criar um roteador de IA. Consulte a documentação para obter mais informações: Introdução.

Exemplo de uso:

 function Editor ( ) {
  const ai = useAI ( {
    basePath : import . meta . env . VITE_OPENAI_BASE_URL
  } ) ;

  return (
    < ReactEditor ref = { editorRef } plugins = { [ ai . plugin ] } >
      { ai . element }
    </ ReactEditor / >
  )
} 

Contribuindo

Obrigado por considerar contribuir para a margem! Se você deseja contribuir, siga estas etapas:

1. Gire o repositório para sua conta do GitHub.

2. Clone o repositório bifurcado à sua máquina local.

git clone https://github.com/yourusername/marktion.git
cd marktion

3. Instalar dependências.

pnpm i

4. Faça alterações e teste suas modificações.

5. Cometer suas mudanças.

6. Crie uma solicitação de tração.

Vá para o repositório original e clique em "Novo solicitação de puxar". Preencha os detalhes necessários e descreva as alterações que você fez.

Analisaremos sua solicitação de tração o mais rápido possível. Obrigado pela sua contribuição!

Licença

Este projeto está licenciado sob a licença do MIT. Consulte o arquivo de licença para obter mais detalhes.

Contato

Se você tiver alguma dúvida, sugestão ou problemas, sinta -se à vontade para nos alcançar através dos seguintes canais:

• E -mail: [email protected]

• Rastreador de edição: problemas do projeto (especifique o tipo de problema no título do problema)