Decorators

內聯樣式和塊級樣式都不是隻是我們想要新增到編輯富中的富內容。例如，Facebook評論輸入提供了藍色背景亮點，用於提及和標籤。

為了支援自定義富文字的靈活性，草稿提供了一個“裝飾器”系統。推特示例提供了一個現實的裝飾器的例子。

（“裝飾器是用來新增高階富內容的一種方法”）

CompositeDecorator

掃描給定的內容塊
滿足定義的匹配策略的文字範圍。
使用自定義的React元件去呈現他們。

可以使用CompositeDecorator類定義所需的裝飾器行為。此類允許您提供多個DraftDecorator物件，並依次搜尋每個策略的一組文字。

裝飾器儲存在EditorState記錄中。當建立一個新的EditorState物件，例如透過EditorState.createEmpty（），可以選擇提供裝飾器。

基於鉤子

當Draft編輯器中的內容更改時，生成的EditorState物件將使用其裝飾器評估新的ContentState，
並標識要進行裝飾的範圍。此時形成了一個完整的塊，裝飾器和內聯樣式，作為我們渲染輸出的基礎。

透過這種方式，我們始終保證隨著內容的改變，渲染的裝飾與我們的EditorState同步。

例如，在“Tweet”編輯器示例中，我們使用一個CompositeDecorator來搜尋@ -handle字串以及主題標籤字串：

const compositeDecorator = new ComponsiteDecorator([
    {
        strategy: handleStrategy,
        component: HandleSpan,
    },
    {
        strategy: hashtagStrategy,
        component: HashtagSpan,
    }
])

此複合裝飾器將首先掃描給定的文字塊以獲取@-handle匹配，然後對於hashtag匹配進行掃描。

const HANDLE_REGEX = /@[W]+/g;
const HASHTAG_REGEX = /#[wu0590-u05ff]+/g;

function handleStrategy(contentBlock, callback, contentState){
    findWithRegex(HANDLE_REGEX, contentBlock, callback)
}

function hashtagStrategy(contentBlock, callback, contentState) {
    findWithRegex(HASHTAG_REGEX, contentBLCOK, callback);
}

function findWithRegex(regex, contenBlock, callback) {
    const text = contenBlock.getText();
    let matchArr, start;
    while((matcArr = regex.exec(text) !== null)) {
        start = matchArr.index;
        callback(start, start + matchArr[0].length);
    }
}

策略函式執行提供的回撥與匹配的文字範圍的起始和結束值。

Decorator Components

對於您裝飾的文字範圍，您必須定義一個用於呈現它們的React元件。這些往往是使用 CSS類或 style 的簡單 span 元素。

在我們當前的示例中，CompositeDecorator物件將HandleSpan和HashtagSpan命名為用於裝飾的元件。
這些只是基本的無狀態元件：

const HandleSpan = (props) => {
    return {props.children}
};

const HashtagSpan = (props) => {
  return {props.children};
};

注意，props.children被傳遞到渲染的輸出。這樣做是為了確保文字在裝飾的範圍內呈現。

您可以使用相同的方法進行連結，如我們的連結示例所示。

超越CompositeDecorator

提供給EditorState的裝飾器物件只需要符合DraftDecoratorType Flow型別定義的期望，這意味著您可以建立任何您想要的裝飾器類，只要它們與預期型別相匹配，則不受CompositeDecorator的限制。

設定新的裝飾

此外，當然，在正常狀態傳播期間，透過不可變的方式，可以在EditorState上設定新的裝飾器值。

這意味著在您的應用程式工作流程中，如果您的裝飾器無效或需要修改，您可以建立一個新的裝飾器物件（或使用null刪除所有裝飾）和EditorState.set（）以使用新的裝飾器設定。

例如，如果由於某種原因，我們希望在使用者與編輯器互動時禁用@ -handle裝飾的建立，那麼執行以下操作會很好：

function turnOffHandleDecorations(editorState) {
  const onlyHashtags = new CompositeDecorator([{
    strategy: hashtagStrategy,
    component: HashtagSpan,
  }]);
  return EditorState.set(editorState, {decorator: onlyHashtags});
}

將使用新裝飾器重新評估此editorState的ContentState，並且@ -handle裝飾將不再存在於下一個渲染過程中。

同樣，由於不可變物件上的資料永續性，這仍然是記憶體有效的。

Draft 文件翻譯 - 高階主題 - Decorators

相關文章