mirror of
https://github.com/thelounge/thelounge.git
synced 2024-06-09 09:12:20 +02:00
Fix up ParsedMessage for vue 3
This commit is contained in:
parent
b589ce1861
commit
d689980f83
|
@ -14,9 +14,7 @@
|
||||||
</span>
|
</span>
|
||||||
<template v-if="message.type === 'unhandled'">
|
<template v-if="message.type === 'unhandled'">
|
||||||
<span class="from">[{{ message.command }}]</span>
|
<span class="from">[{{ message.command }}]</span>
|
||||||
<span class="content">
|
<span class="content">{{ message.params.join(" ") }}</span>
|
||||||
<span v-for="(param, id) in message.params" :key="id">{{ param }} </span>
|
|
||||||
</span>
|
|
||||||
</template>
|
</template>
|
||||||
<template v-else-if="isAction()">
|
<template v-else-if="isAction()">
|
||||||
<span class="from"><span class="only-copy">*** </span></span>
|
<span class="from"><span class="only-copy">*** </span></span>
|
||||||
|
|
|
@ -9,14 +9,11 @@ export default {
|
||||||
message: Object,
|
message: Object,
|
||||||
network: Object,
|
network: Object,
|
||||||
},
|
},
|
||||||
render(createElement, context) {
|
render(context) {
|
||||||
return parse(
|
return parse(
|
||||||
createElement,
|
typeof context.text !== "undefined" ? context.text : context.message.text,
|
||||||
typeof context.props.text !== "undefined"
|
context.message,
|
||||||
? context.props.text
|
context.network
|
||||||
: context.props.message.text,
|
|
||||||
context.props.message,
|
|
||||||
context.props.network
|
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
"use strict";
|
"use strict";
|
||||||
|
|
||||||
|
import {h as createElement} from "vue";
|
||||||
import parseStyle from "./ircmessageparser/parseStyle";
|
import parseStyle from "./ircmessageparser/parseStyle";
|
||||||
import findChannels from "./ircmessageparser/findChannels";
|
import findChannels from "./ircmessageparser/findChannels";
|
||||||
import {findLinks} from "./ircmessageparser/findLinks";
|
import {findLinks} from "./ircmessageparser/findLinks";
|
||||||
|
@ -15,7 +16,7 @@ import Username from "../../components/Username.vue";
|
||||||
const emojiModifiersRegex = /[\u{1f3fb}-\u{1f3ff}]|\u{fe0f}/gu;
|
const emojiModifiersRegex = /[\u{1f3fb}-\u{1f3ff}]|\u{fe0f}/gu;
|
||||||
|
|
||||||
// Create an HTML `span` with styling information for a given fragment
|
// Create an HTML `span` with styling information for a given fragment
|
||||||
function createFragment(fragment, createElement) {
|
function createFragment(fragment) {
|
||||||
const classes = [];
|
const classes = [];
|
||||||
|
|
||||||
if (fragment.bold) {
|
if (fragment.bold) {
|
||||||
|
@ -70,7 +71,7 @@ function createFragment(fragment, createElement) {
|
||||||
|
|
||||||
// Transform an IRC message potentially filled with styling control codes, URLs,
|
// Transform an IRC message potentially filled with styling control codes, URLs,
|
||||||
// nicknames, and channels into a string of HTML elements to display on the client.
|
// nicknames, and channels into a string of HTML elements to display on the client.
|
||||||
function parse(createElement, text, message = undefined, network = undefined) {
|
function parse(text, message = undefined, network = undefined) {
|
||||||
// Extract the styling information and get the plain text version from it
|
// Extract the styling information and get the plain text version from it
|
||||||
const styleFragments = parseStyle(text);
|
const styleFragments = parseStyle(text);
|
||||||
const cleanText = styleFragments.map((fragment) => fragment.text).join("");
|
const cleanText = styleFragments.map((fragment) => fragment.text).join("");
|
||||||
|
@ -90,9 +91,7 @@ function parse(createElement, text, message = undefined, network = undefined) {
|
||||||
// Merge the styling information with the channels / URLs / nicks / text objects and
|
// Merge the styling information with the channels / URLs / nicks / text objects and
|
||||||
// generate HTML strings with the resulting fragments
|
// generate HTML strings with the resulting fragments
|
||||||
return merge(parts, styleFragments, cleanText).map((textPart) => {
|
return merge(parts, styleFragments, cleanText).map((textPart) => {
|
||||||
const fragments = textPart.fragments.map((fragment) =>
|
const fragments = textPart.fragments.map((fragment) => createFragment(fragment));
|
||||||
createFragment(fragment, createElement)
|
|
||||||
);
|
|
||||||
|
|
||||||
// Wrap these potentially styled fragments with links and channel buttons
|
// Wrap these potentially styled fragments with links and channel buttons
|
||||||
if (textPart.link) {
|
if (textPart.link) {
|
||||||
|
@ -103,12 +102,10 @@ function parse(createElement, text, message = undefined, network = undefined) {
|
||||||
const link = createElement(
|
const link = createElement(
|
||||||
"a",
|
"a",
|
||||||
{
|
{
|
||||||
attrs: {
|
href: textPart.link,
|
||||||
href: textPart.link,
|
dir: preview ? null : "auto",
|
||||||
dir: preview ? null : "auto",
|
target: "_blank",
|
||||||
target: "_blank",
|
rel: "noopener",
|
||||||
rel: "noopener",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
fragments
|
fragments
|
||||||
);
|
);
|
||||||
|
@ -122,18 +119,14 @@ function parse(createElement, text, message = undefined, network = undefined) {
|
||||||
if (preview.size > 0) {
|
if (preview.size > 0) {
|
||||||
linkEls.push(
|
linkEls.push(
|
||||||
createElement(LinkPreviewFileSize, {
|
createElement(LinkPreviewFileSize, {
|
||||||
props: {
|
size: preview.size,
|
||||||
size: preview.size,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
linkEls.push(
|
linkEls.push(
|
||||||
createElement(LinkPreviewToggle, {
|
createElement(LinkPreviewToggle, {
|
||||||
props: {
|
link: preview,
|
||||||
link: preview,
|
|
||||||
},
|
|
||||||
})
|
})
|
||||||
);
|
);
|
||||||
|
|
||||||
|
@ -142,9 +135,7 @@ function parse(createElement, text, message = undefined, network = undefined) {
|
||||||
return createElement(
|
return createElement(
|
||||||
"span",
|
"span",
|
||||||
{
|
{
|
||||||
attrs: {
|
dir: "auto",
|
||||||
dir: "auto",
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
linkEls
|
linkEls
|
||||||
);
|
);
|
||||||
|
@ -152,11 +143,11 @@ function parse(createElement, text, message = undefined, network = undefined) {
|
||||||
return createElement(
|
return createElement(
|
||||||
InlineChannel,
|
InlineChannel,
|
||||||
{
|
{
|
||||||
props: {
|
channel: textPart.channel,
|
||||||
channel: textPart.channel,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
fragments
|
{
|
||||||
|
default: () => fragments,
|
||||||
|
}
|
||||||
);
|
);
|
||||||
} else if (textPart.emoji) {
|
} else if (textPart.emoji) {
|
||||||
const emojiWithoutModifiers = textPart.emoji.replace(emojiModifiersRegex, "");
|
const emojiWithoutModifiers = textPart.emoji.replace(emojiModifiersRegex, "");
|
||||||
|
@ -168,11 +159,9 @@ function parse(createElement, text, message = undefined, network = undefined) {
|
||||||
"span",
|
"span",
|
||||||
{
|
{
|
||||||
class: ["emoji"],
|
class: ["emoji"],
|
||||||
attrs: {
|
role: "img",
|
||||||
role: "img",
|
"aria-label": title,
|
||||||
"aria-label": title,
|
title: title,
|
||||||
title: title,
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
fragments
|
fragments
|
||||||
);
|
);
|
||||||
|
@ -180,16 +169,14 @@ function parse(createElement, text, message = undefined, network = undefined) {
|
||||||
return createElement(
|
return createElement(
|
||||||
Username,
|
Username,
|
||||||
{
|
{
|
||||||
props: {
|
user: {
|
||||||
user: {
|
nick: textPart.nick,
|
||||||
nick: textPart.nick,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
attrs: {
|
|
||||||
dir: "auto",
|
|
||||||
},
|
},
|
||||||
|
dir: "auto",
|
||||||
},
|
},
|
||||||
fragments
|
{
|
||||||
|
default: () => fragments,
|
||||||
|
}
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
Loading…
Reference in a new issue