marktion

中文/inglés

Introducción de Marktion

Marktion es un editor de Markdown Wysiwyg basado en Prosemirror, dedicado a mejorar la experiencia de edición de Markdown.

Vea nuestro sitio web Marktion.io en acción.

Características

• [Nuevo] Integración de IA : interfaz de conversación de IA incorporada, que admite extensiones de complementos de IA, invocada al comienzo de una línea presionando el espacio;

• Edición de Wysiwyg : Vista previa en tiempo real de los resultados de representación de Markdown, proporcionando una experiencia de edición intuitiva, y puede cambiar entre el modo de código fuente y el modo de edición de Wysiwyg con Ctrl + /;

• Menú de corte y menú de burbujas : Inspirado rápidamente en el editor de la noción usando /; Soporte del modo oscuro: soporte para encender o apagar el modo oscuro.

• Soporte del modo oscuro : habilitar el modo Oscuro para proporcionar una experiencia de edición visualmente cómoda en entornos con poca luz.

Instalación y uso

1. Instalar dependencias.

npm intall marktion

2. Uso

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

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

3. Ejemplo

Eche un vistazo a los ejemplos para ver Marktion.io en acción.

API

Reacteditorprops

Propiedad	Descripción	Tipo	Por defecto
contenido	El contenido inicial de Markdown para el editor.	cadena	-
oscuro	Habilitar o deshabilitar el modo oscuro en el editor.	booleano	FALSO
suboadOptions.uploter	Función de devolución de llamada para cargar imágenes.	(file: File, event: ClipboardEvent | InputEvent, view: ProsemirrorView) => Promise<url>	-
prestar	modo de renderizador	WYSIWYG | SOURCE
en el cambio	Cambio de contenido del editor Cambio de llamada	(editor: Marktion) => void

Consulte la documentación de TipTap para encontrar más API.

Marktionref

Propiedad	Descripción	Tipo	Por defecto
editor	instancia de marcación	Marcón	-

Ejemplo 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 } />
    </ >
  ) ;
} 

Complementos

Complemento de IA

El complemento AI se basa en Vercel AI. Antes de comenzar, debe crear un enrutador AI. Consulte la documentación para obtener más información: Comenzando.

Ejemplo 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 / >
  )
} 

Que contribuye

¡Gracias por considerar contribuir a la marca! Si desea contribuir, siga estos pasos:

1. Bifurca el repositorio a su cuenta de GitHub.

2. Clone el repositorio bifurcado a su máquina local.

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

3. Instalar dependencias.

pnpm i

4. Haga cambios y pruebe sus modificaciones.

5. Cometer sus cambios.

6. Crear una solicitud de extracción.

Vaya al repositorio original y haga clic en "nueva solicitud de extracción". Complete los detalles necesarios y describa los cambios que realizó.

Revisaremos su solicitud de extracción lo antes posible. ¡Gracias por su contribución!

Licencia

Este proyecto tiene licencia bajo la licencia MIT. Consulte el archivo de licencia para obtener más detalles.

Contacto

Si tiene alguna pregunta, sugerencia o problemas, no dude en comunicarse con nosotros a través de los siguientes canales:

• Correo electrónico: [email protected]

• Rastreador de problemas: problemas del proyecto (especifique el tipo de problema en el título del problema)