Skip to content

Commit

Permalink
Replace some textarea with a proper text editor
Browse files Browse the repository at this point in the history
  • Loading branch information
U039b committed Mar 14, 2024
1 parent 221cbaa commit c544e5a
Show file tree
Hide file tree
Showing 15 changed files with 419 additions and 39 deletions.
1 change: 1 addition & 0 deletions colander/core/views/data_fragment_views.py
Original file line number Diff line number Diff line change
Expand Up @@ -41,6 +41,7 @@ def get_form(self, form_class=None, edit=False):
form.fields['description'].widget = Textarea(attrs={'rows': 2, 'cols': 20})
form.fields['extracted_from'].queryset = artifact_qset
form.fields['extracted_from'].queryset = artifact_qset
form.fields['content'].widget.attrs.update({'class': 'colander-text-editor'})

if not edit:
form.initial['tlp'] = self.active_case.tlp
Expand Down
1 change: 1 addition & 0 deletions colander/core/views/detection_rule_views.py
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ def get_form(self, form_class=None, edit=False):
(t.id, mark_safe(f'<i class="nf {t.nf_icon} text-primary"></i> {t.name}'))
for t in rule_types
]
form.fields['content'].widget.attrs.update({'class': 'colander-text-editor'})
form.fields['type'].widget = RadioSelect(choices=choices)

if not edit:
Expand Down
62 changes: 62 additions & 0 deletions colander/frontend/colander-text-editor/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
import {basicSetup, EditorView} from "codemirror";
import {EditorState} from "@codemirror/state";
import {ayuLight, amy} from 'thememirror';

console.log('Colander text editor ready');

function editorFromTextArea(textarea, extensions) {
let view = new EditorView({
doc: textarea.value,
extensions
})
$(view.dom).height('52em');
$(view.dom).css({'overflow': 'auto', 'max-width': '100%', 'border': '1px solid #c4c3c8', 'border-radius': '8px'});
textarea.parentNode.insertBefore(view.dom, textarea)
$($(textarea.form), $('button[type=submit]')).click(() => {
textarea.value = view.state.doc.toString()
})
if (textarea.form) textarea.form.addEventListener("submit", () => {
textarea.value = view.state.doc.toString()
})
return view
}


window.addEventListener('DOMContentLoaded', () => {
// Replace textarea with a text editor
$('textarea.colander-text-editor').each(function (index, elt) {
const extensions = [
EditorView.contentAttributes.of({contenteditable: true}),
basicSetup,
ayuLight,
]
editorFromTextArea(elt, extensions);
$(this).css('visibility', 'hidden');
$(this).css('position', 'absolute');
})
// Replace pre > code with a text editor in read-only mode
$('pre.colander-text-editor > code').each(function (index, elt) {
let view = new EditorView({
doc: elt.innerHTML,
state: EditorState.create({
doc: elt.innerHTML,
extensions: [
EditorView.contentAttributes.of({contenteditable: false}),
amy,
basicSetup,
EditorView.lineWrapping,
]
}),
})
$(view.dom).css({
'max-height': '64em',
'overflow': 'auto',
'border': '1px solid #c4c3c8',
'border-radius': '8px'
});

elt.parentNode.parentNode.insertBefore(view.dom, elt.parentNode);
$(this).removeClass();
$(this).parent().remove();
})
})
1 change: 1 addition & 0 deletions colander/static/js/colander-text-editor.js

Large diffs are not rendered by default.

32 changes: 20 additions & 12 deletions colander/templates/artifact/details.html
Original file line number Diff line number Diff line change
Expand Up @@ -216,23 +216,31 @@ <h3 class="card-title ">Artifact integrity check</h3>
</div>

<div class="row justify-content-center">
<div class="col-md-4 mt-2">
{% if artifact.type.short_name == "IMAGE" %}
<img src="{% url "collect_artifact_download_view" case_id=artifact.case.id pk=artifact.id %}" class="img-thumbnail" alt="{{ artifact.name }}">
{% elif artifact.type.short_name == "VIDEO" %}
<video controls>
{% include "helpers/extra_attributes.html" with attributes=artifact.attributes %}
{% include "entity_relation/related_entities.html" with entity=artifact %}
</div>

<div class="row justify-content-center">
{% if artifact.type.short_name == "IMAGE" %}
<div class="col-md-4 mt-2">
<img src="{% url "collect_artifact_download_view" case_id=artifact.case.id pk=artifact.id %}"
class="img-thumbnail" alt="{{ artifact.name }}">
</div>
{% elif artifact.type.short_name == "VIDEO" %}
<div class="col-md-4 mt-2">
<video controls>
<source src="{% url "collect_artifact_download_view" case_id=artifact.case.id pk=artifact.id %}">
Your browser does not support the video tag.
Your browser does not support the video tag.
</video>
{% endif %}
</div>
</div>
{% elif artifact.mime_type == "text/plain" or artifact.mime_type == "application/json" or artifact.mime_type == "application/xml" %}
<div class="col-md-10 mt-2">
<pre class="bg-dark text-white rounded-2 p-2 colander-text-editor"><code>{% for l in artifact.file.readlines %}{{ l.decode }}{% endfor %}</code></pre>
</div>
{% endif %}
</div>

<div class="row justify-content-center">
{% include "helpers/extra_attributes.html" with attributes=artifact.attributes %}

{% include "entity_relation/related_entities.html" with entity=artifact %}

<div class="col-md-12 mt-2">
<h3>{% translate "Comments" %}</h3>
{% for comment in artifact.sorted_comments %}
Expand Down
1 change: 1 addition & 0 deletions colander/templates/base.html
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@
<script src="{% static 'js/masonry.pkgd.min.js' %}"></script>
<script src="{% static 'vendors/simplemde/js/simplemde.min.js' %}"></script>
<script src="{% static 'js/colander-widgets.js' %}"></script>
<script src="{% static 'js/colander-text-editor.js' %}"></script>
{% endcompress %}
{% endblock javascript %}
{% compress js %}
Expand Down
12 changes: 9 additions & 3 deletions colander/templates/device/details.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,9 @@ <h2>{% include "icons/pills.html" with elt=device %} {{ device.name }}</h2>
</div>
{% include "device/controls.html" with exclude="details" %}
</div>
<div class="col-md-12 mt-2">
</div>
<div class="row justify-content-center">
<div class="col-md-6 mt-2">
<h3>{% translate "Details" %}</h3>
<table class="table table-sm">
<tbody>
Expand Down Expand Up @@ -100,9 +102,13 @@ <h3>{% translate "Details" %}</h3>
</tbody>
</table>
</div>
<div class="col-md-6 mt-2">
<h3>{% translate "Attributes" %}</h3>
{% include "helpers/extra_attributes_light.html" with attributes=device.attributes %}
</div>
</div>

{% include "helpers/extra_attributes.html" with attributes=device.attributes %}

<div class="row justify-content-center">
{% include "entity_relation/related_entities.html" with entity=device %}

<div class="col-md-12 mt-2">
Expand Down
13 changes: 10 additions & 3 deletions colander/templates/event/details.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,7 +13,10 @@ <h2>{% include "icons/pills.html" with elt=event %} {{ event.name }}</h2>
</div>
{% include "event/controls.html" with exclude="details" btn_class="" %}
</div>
<div class="col-md-12 mt-2">
</div>

<div class="row justify-content-center">
<div class="col-md-6 mt-2">
<h3>{% translate "Details" %}</h3>
<table class="table table-sm">
<tbody>
Expand Down Expand Up @@ -118,9 +121,13 @@ <h3>{% translate "Details" %}</h3>
</tbody>
</table>
</div>
<div class="col-md-6 mt-2">
<h3>{% translate "Attributes" %}</h3>
{% include "helpers/extra_attributes_light.html" with attributes=event.attributes %}
</div>
</div>

{% include "helpers/extra_attributes.html" with attributes=event.attributes %}

<div class="row justify-content-center">
<div class="col-md-12 mt-2">
<h3>{% translate "Involved observables" %}</h3>
{% for observable in event.involved_observables.all %}
Expand Down
15 changes: 15 additions & 0 deletions colander/templates/helpers/extra_attributes_light.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
{% load i18n %}
{% load colander_tags %}

<table class="table table-sm">
<tbody>
{% for k,v in attributes.items %}
{% if v %}
<tr>
<td data-bs-toggle="tooltip" data-bs-placement="left" title="{{ k }}">{{ k|to_title }}</td>
<td class="font-monospace text-wrap4">{{ v }}</td>
</tr>
{% endif %}
{% endfor %}
</tbody>
</table>
12 changes: 9 additions & 3 deletions colander/templates/observable/details.html
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
{% load i18n %}
{% load markdownify %}
{% load colander_tags %}

<div class="row justify-content-center">
<div class="col-md-12 mt-2">
Expand All @@ -13,7 +14,8 @@ <h2>{% include "icons/pills.html" with elt=observable %} {{ observable.name }}</
</div>
{% include "observable/controls.html" with exclude="details" %}
</div>
<div class="col-md-12 mt-2">
<div class="row justify-content-center">
<div class="col-md-6 mt-2">
<h3>{% translate "Details" %}</h3>
<table class="table table-sm">
<tbody>
Expand Down Expand Up @@ -138,9 +140,13 @@ <h3>{% translate "Details" %}</h3>
</tbody>
</table>
</div>
<div class="col-md-6 mt-2">
<h3>{% translate "Attributes" %}</h3>
{% include "helpers/extra_attributes_light.html" with attributes=observable.attributes %}
</div>
</div>

{% include "helpers/extra_attributes.html" with attributes=observable.attributes %}

<div class="row justify-content-center">
{% include "entity_relation/related_entities.html" with entity=observable %}

<div class="col-md-12 mt-2">
Expand Down
20 changes: 11 additions & 9 deletions colander/templates/pages/collect/data_fragments.html
Original file line number Diff line number Diff line change
Expand Up @@ -15,24 +15,26 @@ <h2>{% translate "New fragment of data" %}</h2>
<div class="card mb-4 bg-secondary-light">
<div class="card-body">
<form method="post">
{% csrf_token %}
<div class="row justify-content-center">
<div class="col-md-4">
{% csrf_token %}
{{ form.type|as_crispy_field }}
</div>
<div class="col">
{{ form.name|as_crispy_field }}
{{ form.tlp|as_crispy_field }}
{{ form.pap|as_crispy_field }}
{{ form.extracted_from|as_crispy_field }}
{{ form.source_url|as_crispy_field }}
{{ form.description|as_crispy_field }}
<div class="text-end">
{% if is_editing %}
<button class="btn btn-primary" type="submit" name="save_detection_rule">{% translate "Update" %}</button>
{% else %}
<button class="btn btn-primary" type="submit" name="save_detection_rule">{% translate "Create" %}</button>
{% endif %}
</div>
</div>
<div class="col-8">
{{ form.name|as_crispy_field }}
{{ form.content|as_crispy_field }}
{% if is_editing %}
<button class="btn btn-primary" type="submit" name="save_data_fragment">{% translate "Update" %}</button>
{% else %}
<button class="btn btn-primary" type="submit" name="save_data_fragment">{% translate "Create" %}</button>
{% endif %}
</form>
</div>
</div>
Expand Down
21 changes: 12 additions & 9 deletions colander/templates/pages/collect/detection_rules.html
Original file line number Diff line number Diff line change
Expand Up @@ -14,24 +14,27 @@ <h2>{% translate "New detection rule" %}</h2>
{% endif %}
<div class="card mb-4 bg-secondary-light">
<div class="card-body">
<form method="post">
<form method="post" id="crud_form">
{% csrf_token %}
<div class="row justify-content-center">
<div class="col-md-4">
{{ form.type|as_crispy_field }}
</div>
<div class="col">
{{ form.name|as_crispy_field }}
{{ form.tlp|as_crispy_field }}
{{ form.pap|as_crispy_field }}
{{ form.source_url|as_crispy_field }}
{{ form.description|as_crispy_field }}
<div class="text-end">
{% if is_editing %}
<button class="btn btn-primary" type="submit" form="crud_form" name="save_detection_rule">{% translate "Update" %}</button>
{% else %}
<button class="btn btn-primary" type="submit" form="crud_form" name="save_detection_rule">{% translate "Create" %}</button>
{% endif %}
</div>
</div>
<div class="col-8">
{{ form.name|as_crispy_field }}
{{ form.content|as_crispy_field }}
{% if is_editing %}
<button class="btn btn-primary" type="submit" name="save_detection_rule">{% translate "Update" %}</button>
{% else %}
<button class="btn btn-primary" type="submit" name="save_detection_rule">{% translate "Create" %}</button>
{% endif %}
</div>
</form>
</div>
</div>
Expand Down
Loading

0 comments on commit c544e5a

Please sign in to comment.