PetAcademy - Documentação

📜 Explicação Geral

Este arquivo contém constantes que são amplamente usadas no Lexical, um framework de edição de texto. Ele define tipos e valores que lidam com a formatação de texto, alinhamento de elementos e o comportamento de nós, como o tipo de texto e a formatação aplicada a ele. Vamos explorar as principais seções e seus componentes.

🔑 Constantes para Elementos e Texto

Aqui, são definidas algumas constantes fundamentais que ajudam a identificar o tipo de nó e as propriedades de formatação.

Tipos de Elementos e Texto:

// DOM
export const DOM_ELEMENT_TYPE = 1
export const DOM_TEXT_TYPE = 3

DOM_ELEMENT_TYPE: Refere-se ao tipo de nó de elemento no DOM (representa um elemento HTML).
DOM_TEXT_TYPE: Representa um nó de texto no DOM (por exemplo, o conteúdo de uma tag <p>).

Essas constantes ajudam a diferenciar entre tipos de dados ao manipular a árvore do DOM.

Reconciliando o Estado:

// Reconciling
export const NO_DIRTY_NODES = 0
export const HAS_DIRTY_NODES = 1
export const FULL_RECONCILE = 2

NO_DIRTY_NODES: Indica que não há nós "sujos" (nós que precisam ser atualizados ou reprocessados).
HAS_DIRTY_NODES: Indica que há nós que precisam de uma atualização.
FULL_RECONCILE: Indica que o processo de reconciliação deve ser completo, considerando todos os nós.

Modos de Nó de Texto:

// Text node modes
export const IS_NORMAL = 0
export const IS_TOKEN = 1
export const IS_SEGMENTED = 2

Esses valores determinam como os nós de texto são tratados:

IS_NORMAL: O modo padrão de um nó de texto.
IS_TOKEN: Usado para identificar um texto como tokenizado.
IS_SEGMENTED: Usado quando o texto está segmentado em partes menores.

📝 Constantes para Formatação de Texto

Agora, temos as constantes que controlam a formatação do texto, como negrito, itálico, sublinhado e outras.

// Text node formatting
export const IS_BOLD = 1
export const IS_ITALIC = 1 << 1
export const IS_STRIKETHROUGH = 1 << 2
export const IS_UNDERLINE = 1 << 3
export const IS_CODE = 1 << 4
export const IS_SUBSCRIPT = 1 << 5
export const IS_SUPERSCRIPT = 1 << 6
export const IS_HIGHLIGHT = 1 << 7

Aqui, cada constante é representada por um número (ou bit) que corresponde a um estilo de formatação. O uso de deslocamento de bits (por exemplo, 1 << 1) permite combinar essas formatações de maneira eficiente.

🧑‍💻 Tipos de Elementos e Formatação

// Element node formatting
export const IS_ALIGN_LEFT = 1
export const IS_ALIGN_CENTER = 2
export const IS_ALIGN_RIGHT = 3
export const IS_ALIGN_JUSTIFY = 4

Estas constantes são usadas para definir o alinhamento de elementos, como texto e blocos:

IS_ALIGN_LEFT: Alinha o conteúdo à esquerda.
IS_ALIGN_CENTER: Alinha o conteúdo ao centro.
IS_ALIGN_RIGHT: Alinha o conteúdo à direita.
IS_ALIGN_JUSTIFY: Justifica o texto.

🧮 Expressões Regulares para Direção de Texto

O Lexical também precisa verificar se o texto é lido da esquerda para a direita (LTR) ou da direita para a esquerda (RTL). Aqui estão as expressões regulares que fazem essa verificação.

const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'
const LTR =
  'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' +
  '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' +
  '\uFE00-\uFE6F\uFEFD-\uFFFF'
 
export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')

RTL e LTR definem os intervalos Unicode para caracteres de escrita da direita para a esquerda e da esquerda para a direita.
RTL_REGEX e LTR_REGEX são expressões regulares que ajudam a identificar a direção do texto com base nesses intervalos.

🏁 Código Completo:

// @ts-nocheck
//This copy-and-pasted from lexical here: https://github.com/facebook/lexical/blob/c2ceee223f46543d12c574e62155e619f9a18a5d/packages/lexical/src/LexicalConstants.ts
 
import type { ElementFormatType, TextFormatType } from 'lexical'
import type { TextDetailType, TextModeType } from 'lexical/nodes/LexicalTextNode'
 
/**
 * Copyright (c) Meta Platforms, Inc. and affiliates.
 *
 * This source code is licensed under the MIT license found in the
 * LICENSE file in the root directory of this source tree.
 *
 */
 
// DOM
export const DOM_ELEMENT_TYPE = 1
export const DOM_TEXT_TYPE = 3
 
// Reconciling
export const NO_DIRTY_NODES = 0
export const HAS_DIRTY_NODES = 1
export const FULL_RECONCILE = 2
 
// Text node modes
export const IS_NORMAL = 0
export const IS_TOKEN = 1
export const IS_SEGMENTED = 2
// IS_INERT = 3
 
// Text node formatting
export const IS_BOLD = 1
export const IS_ITALIC = 1 << 1
export const IS_STRIKETHROUGH = 1 << 2
export const IS_UNDERLINE = 1 << 3
export const IS_CODE = 1 << 4
export const IS_SUBSCRIPT = 1 << 5
export const IS_SUPERSCRIPT = 1 << 6
export const IS_HIGHLIGHT = 1 << 7
 
// New types for uploads e relationship
export const NODE_TYPE_UPLOAD = 'upload'
export const NODE_TYPE_RELATIONSHIP = 'relationship'
 
export const IS_ALL_FORMATTING =
  IS_BOLD |
  IS_ITALIC |
  IS_STRIKETHROUGH |
  IS_UNDERLINE |
  IS_CODE |
  IS_SUBSCRIPT |
  IS_SUPERSCRIPT |
  IS_HIGHLIGHT
 
// Text node details
export const IS_DIRECTIONLESS = 1
export const IS_UNMERGEABLE = 1 << 1
 
// Element node formatting
export const IS_ALIGN_LEFT = 1
export const IS_ALIGN_CENTER = 2
export const IS_ALIGN_RIGHT = 3
export const IS_ALIGN_JUSTIFY = 4
export const IS_ALIGN_START = 5
export const IS_ALIGN_END = 6
 
// Reconciliation
export const NON_BREAKING_SPACE = '\u00A0'
const ZERO_WIDTH_SPACE = '\u200b'
 
export const DOUBLE_LINE_BREAK = '\n\n'
 
// For FF, we need to use a non-breaking space, or it gets composition
// in a stuck state.
 
const RTL = '\u0591-\u07FF\uFB1D-\uFDFD\uFE70-\uFEFC'
const LTR =
  'A-Za-z\u00C0-\u00D6\u00D8-\u00F6' +
  '\u00F8-\u02B8\u0300-\u0590\u0800-\u1FFF\u200E\u2C00-\uFB1C' +
  '\uFE00-\uFE6F\uFEFD-\uFFFF'
 
export const RTL_REGEX = new RegExp('^[^' + LTR + ']*[' + RTL + ']')
 
export const LTR_REGEX = new RegExp('^[^' + RTL + ']*[' + LTR + ']')
 
export const TEXT_TYPE_TO_FORMAT: Record<TextFormatType | string, number> = {
  bold: IS_BOLD,
  code: IS_CODE,
  highlight: IS_HIGHLIGHT,
  italic: IS_ITALIC,
  strikethrough: IS_STRIKETHROUGH,
  subscript: IS_SUBSCRIPT,
  superscript: IS_SUPERSCRIPT,
  underline: IS_UNDERLINE,
}
 
export const DETAIL_TYPE_TO_DETAIL: Record<TextDetailType | string, number> = {
  directionless: IS_DIRECTIONLESS,
  unmergeable: IS_UNMERGEABLE,
}
 
export const ELEMENT_TYPE_TO_FORMAT: Record<Exclude<ElementFormatType, ''>, number> = {
  center: IS_ALIGN_CENTER,
  end: IS_ALIGN_END,
  justify: IS_ALIGN_JUSTIFY,
  left: IS_ALIGN_LEFT,
  right: IS_ALIGN_RIGHT,
  start: IS_ALIGN_START,
}
 
export const ELEMENT_FORMAT_TO_TYPE: Record<number, ElementFormatType> = {
  [IS_ALIGN_CENTER]: 'center',
  [IS_ALIGN_END]: 'end',
  [IS_ALIGN_JUSTIFY]: 'justify',
  [IS_ALIGN_LEFT]: 'left',
  [IS_ALIGN_RIGHT]: 'right',
  [IS_ALIGN_START]: 'start',
}
 
export const TEXT_MODE_TO_TYPE: Record<TextModeType, 0 | 1 | 2> = {
  normal: IS_NORMAL,
  segmented: IS_SEGMENTED,
  token: IS_TOKEN,
}
 
export const TEXT_TYPE_TO_MODE: Record<number, TextModeType> = {
  [IS_NORMAL]: 'normal',
  [IS_SEGMENTED]: 'segmented',
  [IS_TOKEN]: 'token',
}

getDisqusConfig.js serialize.tsx