Замена аватара и имени пользователя для конкретного сообщения

Разработка
2

Привет, unfairest,

Я наткнулся на этот пост и решил попробовать!

Вот первая версия; надеюсь, код не слишком ужасен. :slightly_smiling_face:
Я не проводил тщательное тестирование всех крайних случаев. Это лишь отправная точка.

  • Ожидаемый формат обёртки: [wrap=character avatar="<URL>" name="<Имя>"][/wrap]
  • Убедитесь, что под тегом [wrap] есть пустая строка
  • Вы можете настроить имя персонажа с помощью CSS (см. классы character и character-extra)

Дайте знать, если возникнут проблемы :slight_smile:

Заголовок 
<script type="text/discourse-plugin" version="0.8.13">

let characters = new Map();

function searchTag(obj, tag) {
  if (!obj || !obj.firstObject) return;
  
  const firstObj = obj.firstObject;
  return firstObj.tagName === tag ? firstObj : searchTag(firstObj.children, tag);
}
            
api.addPostTransformCallback(post => 
{
    if (post.post_number <= 1 || post.post_type !== 1) {
        return;
    }

    const matches = post.cooked.match(/data-wrap="character"\s+data-avatar="(?<avatar>[^"]+)"\s+data-name="(?<name>[^"]+)"/i);
    
    if (!matches) {
        characters.delete(post.id);
        return;
    }
    
    // TODO: проверка корректности аватара/имени
    
    const {name, avatar} = matches.groups;
    
    characters.set(post.id, {name, avatar});
    
});

api.reopenWidget("post-avatar", {
    html(attrs) {
        const html = this._super(attrs);
        
        if (attrs.id && characters.has(attrs.id)) {
            const imageHtml = searchTag(html, 'IMG');
    
            if (imageHtml) {
                imageHtml.properties.attributes.src = characters.get(attrs.id).avatar;
            }
        }
        
        return html;
    }
});

api.reopenWidget("poster-name", {
    html(attrs) {
        let html = this._super(attrs);
        
        if (attrs.id && characters.has(attrs.id)) {
            const h = require("virtual-dom").h;
            
            html = [
                h('span.character', this.userLink(attrs, characters.get(attrs.id).name)),
                h('span.character-extra', 'в исполнении'), // опционально
                ...html
            ];
        }
        
        return html;
    }
});

</script>
CSS 
.names {
    .character a {
        font-weight: bold;
        color: var(--tertiary-high);
    }
    
    .character-extra {
        
    }
}

.cooked, .d-editor-preview {
    p:has(> [data-wrap="character"]) {
        display: none;
    }
    
    p:has(> [data-wrap="character"]) + * {
        margin-top: 0;
    }
}

Вот небольшая демонстрация того, как это выглядит: